border-spacing

CSS border-spacing 속성은 인접한 표 칸의 테두리 간격을 지정합니다. border-collapseseparate여야 적용됩니다.

border-spacing 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) border-spacing 값과 표에 적용한 (상/우/하/좌) padding 값의 합이 됩니다.

참고: border-spacing 속성은 <table>에서 이제 사용하지 않는 cellspacing 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.

구문

/* <length> */
border-spacing: 2px;

/* 가로 <length> | 세로 <length> */
border-spacing: 1cm 2em;

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

border-spacing 값은 하나 또는 두 개의 값을 사용해 지정합니다.

  • 한 개<length> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.
  • 두 개의 <length> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.

<length>
간격의 크기로 지정할 길이입니다.

형식 정의

초기값0
적용대상table and inline-table elements
상속yes
Computed valuetwo absolute lengths
Animation typediscrete

형식 구문

<length> <length>?

예제

칸 간격과 안쪽 여백

다음 예제는 칸 사이에 세로 간격 0.5em과 가로 간격 1em을 배치합니다. 표의 테두리를 따라가면서, padding 값이 border-spacing과 어떻게 작용하는지 살펴보세요.

HTML

<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>

CSS

table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}

결과

명세

명세 상태 설명
CSS Level 2 (Revision 1)
The definition of 'border-spacing' in that specification.
Recommendation 초기 정의

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-spacingChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 4Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

같이 보기