AAtomic CSS

border-spacing

테이블 셀 사이의 간격을 설정합니다. 셀마다 테두리를 따로 그리는 border-collapse: separate 상태에서만 동작하며, 격자를 카드처럼 띄워 보이게 만드는 유일한 방법입니다.

클래스 목록

bs 프리픽스에 단위를 붙여 사용합니다.

클래스CSS설명
bs4pxborder-spacing: 4px4px 간격
bs8pxborder-spacing: 8px8px 간격
bs16pxborder-spacing: 16px16px 간격
bs2remborder-spacing: 2rem20px 간격 (2rem)

시각 데모

네 테이블 모두 셀 내용과 테두리가 같습니다. 다른 것은 border-collapse 값과 간격뿐입니다. 마지막 테이블은 가장 흔한 실수를 보여줍니다.

collapse — bcc

A1B1
A2B2

테두리가 하나로 합쳐지고 간격은 존재할 수 없습니다.

separate + bs4px

A1B1
A2B2

셀마다 테두리가 따로 그려지고 4px씩 벌어집니다.

separate + bs2rem

A1B1
A2B2

간격을 키우면 각 셀이 독립된 타일처럼 보입니다.

collapse + bs2rem

A1B1
A2B2

간격이 무시됩니다. collapse 상태에서는 border-spacing이 적용되지 않습니다.

<!-- Collapsed: shared borders, no spacing possible -->
<table class="bcc">...</table>

<!-- Separate: every cell keeps its own border, spacing applies -->
<table class="bcs bs4px">...</table>
<table class="bcs bs2rem">...</table>

<!-- Collapsed again: bs2rem is silently ignored -->
<table class="bcc bs2rem">...</table>

클래스별 상세

bs4pxborder-spacing: 4px

가장 작은 간격입니다. 셀 테두리가 두 겹으로 겹쳐 보이는 것을 막을 정도만 띄워, 여전히 하나의 표로 읽히게 합니다.

<!-- Just enough air to see doubled borders as a seam -->
<table class="bcs bs4px w100p">
  <tr><td class="b1pxsolid27272A p12px">Cell</td></tr>
</table>

bs8pxborder-spacing: 8px

데이터 행을 카드처럼 분리할 때 적당한 기본값입니다. 행마다 배경색을 주면 간격이 자연스럽게 구분선 역할을 합니다.

<!-- Card-like rows in a data table -->
<table class="bcs bs8px w100p">
  <tr>
    <td class="bg18181B br6px p16px">Row as a card</td>
  </tr>
</table>

bs16pxbs2remborder-spacing: 16px / 2rem

간격이 넓어지면 표라기보다 타일 격자로 읽힙니다. 달력이나 요금제 비교표처럼 셀 하나하나가 독립된 카드여야 할 때 쓰세요.

<!-- Calendar grid: each day is its own tile -->
<table class="bcs bs16px w100p">
  <tr>
    <td class="bg18181B br8px p16px h8rem vat">1</td>
    <td class="bg18181B br8px p16px h8rem vat">2</td>
  </tr>
</table>

가로세로를 따로 줄 수도 있습니다

CSS의 border-spacing은 값을 두 개 받아 가로 간격과 세로 간격을 나눠 지정할 수 있습니다. Atomic 클래스는 단일 값만 다루므로, 다른 값이 필요하면 프로젝트 CSS에서 지정하세요.

실전 예시

<!-- Table cell gap -->
<table class="bcs bs8px">
  <tr>
    <td class="bg18181B p16px">Cell 1</td>
    <td class="bg18181B p16px">Cell 2</td>
  </tr>
  <tr>
    <td class="bg18181B p16px">Cell 3</td>
    <td class="bg18181B p16px">Cell 4</td>
  </tr>
</table>

요금제 비교표처럼 열마다 카드로 보여야 하는 표가 대표적인 사용처입니다.

<!-- Pricing comparison: each plan column reads as a separate card,
     which only works because the table is not collapsed -->
<table class="bcs bs16px w100p">
  <thead>
    <tr>
      <th class="p16px tal fs12px ttu ls0-05em cA1A1AA"></th>
      <th class="bg18181B br8px p16px cFAFAFA">Free</th>
      <th class="bg6366F1 br8px p16px cFFFFFF">Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="p16px fs13px c71717A">Projects</td>
      <td class="bg18181B br8px p16px tac cFAFAFA">3</td>
      <td class="bg1E1E2E br8px p16px tac cFAFAFA">Unlimited</td>
    </tr>
  </tbody>
</table>

팁 / 주의사항

bs 프리픽스 중복

bs 프리픽스는 border-spacing과 box-shadow 패턴에서 공유됩니다. 문맥에 따라 구분하며, 단위가 있는 bs8px, bs2rem 등은 border-spacing으로 해석됩니다.

border-collapse: separate가 없으면 무시됩니다

이 속성은 bcs와 짝일 때만 동작합니다. 리셋 CSS나 공용 테이블 스타일이 bcc를 걸어 두는 경우가 많아, 간격이 안 먹는다면 여기부터 확인하세요.

테이블 바깥 가장자리에도 간격이 생깁니다

border-spacing은 셀 사이뿐 아니라 테이블 테두리와 첫 셀 사이에도 같은 간격을 넣습니다. 표가 미묘하게 안쪽으로 밀려 보인다면 이 때문입니다.

셀에 준 margin은 무시됩니다

테이블 셀에는 margin이 적용되지 않습니다. 셀 사이를 벌리는 방법은 border-spacing뿐이고, 셀 안쪽 여백은 padding으로 잡아야 합니다.

border-collapsetable-layoutvertical-aligngapdisplay