• Q&A
  • 회원가입
  • 로그인

[table] CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보더스페이싱속성, IE8) ★

border-spacing 예제
 
<style>
table {border:1px solid; border-collapse:seperate;border-spacing:5px 10px;}
td {border:1px solid; border-collapse:seperate;}
</style>
 
<table>
    <tr>
      <td><h1>홈짱닷컴 (homzzang.com)</h1></td>
   </tr>
    <tr>
      <td><h1>HTML CSS 무료 강의 홈피</h1></td>
   </tr>
</table>

결과보기


 
border-spacing 정의

 

테이블 셀 테두리 간의 간격 지정.

 


 

1.

border-collapse:seperate 일 때 작동. (즉, border-collapse:collapse 일 땐, 작동 X)

 

2. 

기본값 : 2px

상속여부 : O

애니효과 : O

CSS버전 : CSS2

JS구문 : object.style.borderSpacing="15px"

 

3.

IE8 이상 최신브라우저 지원.

 


 
border-spacing 구문
 
선택자 {border-spacing:속성값;}
 

[속성값] ※ 안쪽 여백 속성인 padding도 마찬가지.
 
length (px 단위, cm 단위 등)
양수만 가능 (음수는 불가)
  
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소의 속성을 상속
 

[속성값 개수별 의미] ※ 안쪽 여백 속성인 padding도 마찬가지.
 
1개
(수평・수직)을 한번에 지정.
(예) 선택자 {border-spacing: 10px;}  수평수직 10px

2개
수평, 수직끼리 각각  지정.
(예) 선택자 {border-spacing: 10px 20px;} 수평10px, 수직 20px

 


 
※ 주의
1. border-spacing 단위 2개 나열 시, margin값 나열 방식과 달리 앞이 수평이고, 뒤가 수직임.
2. border-collapse:collapse; 와 동시에 사용할 경우, 작동 안 함.
 

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012