border-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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
계산 값two absolute lengths
Animation typediscrete

형식 구문

border-spacing = 
<length>{1,2}

예제

칸 간격과 안쪽 여백

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

HTML

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

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;
}

결과

명세

Specification
Cascading Style Sheets Level 2
# separated-borders

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-spacing

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기