border-spacing CSS 속성(property)은 인접한 표 셀의 테두리 간 간격을 지정합니다 (분리 테두리 모델만을 위한). 이는 프리젠테이션 HTML에서 cellspacing attribute에 해당하지만 선택 사항인 두 번째 값은 서로 다른 가로 및 세로 간격을 설정하는데 사용될 수 있습니다.

border-spacing 값은 표의 외부 경계(edge)를 따라 사용되기도 합니다, 표 테두리와 첫/끝 열 또는 행의 셀 간 간격이 관련 (가로 또는 세로) border-spacing과 표의 관련 (상, 우, 하 또는 좌) 패딩(padding)의 합인.

구문

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

/* border-spacing: horizontal vertical */
border-spacing: 1% 2em;

border-spacing: inherit;

<length>
간격의 크기로 고정값 사용.

형식 구문

<length> <length>?

예제

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 .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 초기 정의

브라우저 호환성

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 ? Chrome Android ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, wbamberg, Netaras
최종 변경자: alattalatta,