c CSS

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

13,353

http://jsfiddle.net/hk3uyj68/ (947)

목록 글쓰기

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; 와 동시에 사용할 경우, 작동 안 함.