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-collapse가 separate여야 적용됩니다.

시도해 보기

border-spacing: 0;

border-spacing: 5px;

border-spacing: 5px 1rem;


  

    

      Cell 1.1
      Cell 1.2
    

    

      Cell 2.1
      Cell 2.2
    

    

      Cell 3.1
      Cell 3.2
    

  




table {
  width: 15rem;
  table-layout: fixed;
}

td {
  border: 5px solid;
  border-color: crimson dodgerblue;
  padding: 0.75rem;
}

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

참고: border-spacing 속성은

에서 이제 사용하지 않는 cellspacing 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.

구문

/*  */
border-spacing: 2px;

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

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

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

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

값

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

형식 정의

초기값0
적용대상table and inline-table elements
상속yes
계산 값two absolute lengths
Animation typediscrete

형식 구문

border-spacing = 
  {1,2}

예제

칸 간격과 안쪽 여백

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

HTML

html

  

    1
    2
    3
  

  

    4
    5
    6
  

  

    7
    8
    9

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

브라우저 호환성

같이 보기