border-spacing 속성의 이해

border-spacing 속성은
테이블(<table>, 표)에서 인접한 셀과 셀 사이 간격을 지정합니다.

  • 셀과 셀 사이의 가로 및 세로 간격을 동시에 지정할 수 있습니다.
  • 셀과 셀 사이의 가로와 세로 간격을 각각 지정할 수도 있습니다.

주의하세요!
border-spacing 속성은 테이블의 border-collapse 속성이 separate로 설정되어 있을 때만 적용됩니다.

데모

다음의 CSS 데모로 border-spacing 속성의 사용 방법을 확인해 보세요.

CSS 데모: border-spacing 데모 버튼을 클릭해 보세요!

예제

HTML 
<table>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>
CSS 
table {
    border-collapse: separate; /* 이 값을 지정하지 않아도 border-collapse의 초깃값은 separate이다 */
    border-spacing: 5px 10px; /* 가로 간격: 5px, 세로 간격: 10px */
    padding: 0 10px 20px 30px; /* 위: 0, 오른쪽: 10px, 아래: 20px, 왼쪽: 30px */
    border: 2px solid orange;
}
td {
    background-color: #d1d1d1;
}
실제 적용된 모습

위 예제처럼 border-spacing 속성을 적용한 <table>에 padding이 적용되어 있으면, border-spacing 속성으로 만들어진 간격과 padding으로 만들어진 여백이 맞닿아 있는 곳은 서로 겹치지 않고 두 값을 더한 간격으로 표시됩니다.

예를 들어, border-spacing로 설정한 가로 간격이 5px이고, 테이블에 오른쪽 padding이 10px이라면, 셀과 테이블의 외부 테두리 사이 간격은 두 값을 합한 15px이 됩니다.

형식 구문

CSS 
/* 적용 요소: <table>
            (display 속성이 table 또는, inline-table로 설정되어 있는 요소) */
selector {
    border-spacing: <길이>
    /* 한 개 또는 띄어쓰기를 구분하여 두 개의 <길이> 값 */
}

구문

CSS 
/* 한 개 <길이> 값 
   : '가로 간격' 및 '세로 간격' 모두 같은 값 */
border-spacing: 0;
border-spacing: 3px;
border-spacing: 1em;

/* 두 개 <길이> 값
   : 첫 번째 값은 '가로 간격'에 지정되고
   : 두 번째 값은 '세로 간격'에 지정 */
border-spacing: 0 1em;
border-spacing: 5px 0.5em;

/* 전역 값 */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;

값

<길이> 값을 사용할 수 있습니다. 간격의 크기를 고정된 길이 값으로 지정합니다.
길이 값은 양수나 0입니다. (음수 값은 유효하지 않습니다.)
초깃값은 0입니다.

상대적 <길이> 단위

  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위

  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위

주의하세요!
border-spacing의 값에는 퍼센트(%) 단위 값을 사용할 수 없습니다.

형식 정의

border-spacing 속성의 형식 정의
초깃값 0
적용 요소 <table>
(display 속성이 table 또는, inline-table로 설정되어 있는 요소)
상속 예
애니메이션 예

브라우저의 기본 스타일시트

border-spacing의 초깃값은 0입니다.
이것은 셀과 셀 사이 간격이 없다는 것을 의미합니다.

하지만 브라우저에서 실제로 구현된 모습을 보면 ,셀과 셀 사이에 약간의 간격이 있습니다.
이것은 브라우저의 기본 스타일시트에서 border-spacing의 값이 별도로 설정되어 있기 때문입니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

실제로 적용된 예제를 참고하세요!

HTML 
<table>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>
CSS 
table {
    /* bordr-spacing을 지정하지 않았습니다 */
    border: 1px solid black;
}
td {
    border: 1px solid black;
}

아래의 '실제 적용된 모습'을 보면 셀과 셀 사이에 약간의 간격이 있습니다.

실제 적용된 모습

브라우저 호환성

border-spacing 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
border-spacing 1 12 1 1

명세서

border-spacing 속성의 명세서 사양
명세서 사양
border-spacing Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#eparated-borders

참고문헌

같이 보기