CSS / Reference / border-spacing

border-spacing은 border-collapse: separate인 표에서 인접한 셀 테두리 사이의 간격을 정합니다. 값 하나는 가로·세로에 함께 적용하고, 값 두 개는 가로 간격과 세로 간격 순서로 지정합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

table { border-collapse: separate; border-spacing: 12px 6px; }

값과 적용 조건은 MDN border-spacing에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 border-spacing-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>border-spacing 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
table { border-collapse: separate; border: 2px solid #333; }
td { padding: 10px; border: 2px solid #006c9c; }
.target { border-spacing: 12px 6px; }
.reference { border-spacing: 0; }
</style>
</head>
<body>
<main id="demo">
<h1>border-spacing 적용 비교</h1>
<section class="samples"><div><p class="label">12px 6px</p><table class="target"><tbody><tr><td>내용</td><td></td></tr><tr><td>두 번째</td><td>값</td></tr></tbody></table></div><div><p class="label">0</p><table class="reference"><tbody><tr><td>내용</td><td></td></tr><tr><td>두 번째</td><td>값</td></tr></tbody></table></div></section>
</main>
</body>
</html>

첫 표에서는 셀 사이에 가로 12px, 세로 6px의 간격이 생깁니다. 두 번째 표는 간격이 0이지만 인접한 테두리가 collapse처럼 합쳐지는 것은 아닙니다.

padding과 간격의 차이

td의 padding은 셀 테두리와 셀 내용 사이를 벌립니다. border-spacing은 셀 테두리와 이웃 셀 테두리 사이를 벌리므로 두 설정을 같은 의미로 사용하지 않습니다. 표 바깥 테두리와 끝 셀 사이의 공간에는 표 padding과 셀 간격도 관여합니다.

초기 값과 브라우저 기본 스타일

속성의 초기 값은 0이지만 브라우저 기본 스타일이 표에 별도 간격을 지정할 수 있습니다. 화면에서 흔히 보이는 2px를 속성 자체의 초기 값이라고 단정하지 마세요. 원하는 결과가 중요하면 separate와 간격을 함께 명시합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 기존 .reference에서 border-spacing:0을 유지한 채 collapse로 바꾸면 맞닿은 테두리 처리도 달라집니다. 간격 0과 테두리 병합을 구분한 뒤 separate로 복구합니다.
2. 첫 표의 값을 6px 12px로 뒤집어 가로·세로 간격만 바뀌는지 확인하고 12px 6px로 되돌립니다. td padding은 바꾸지 않습니다.

표 전체의 너비와 셀 크기를 함께 조정하려면 표와 셀의 크기 조절하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 empty-cells입니다.

적용되지 않거나 예상과 다를 때

• 테마가 table에 border-collapse: collapse를 강제하는지 확인합니다.
• 음수나 백분율은 간격 값으로 쓰지 말고 허용된 길이 값을 사용합니다.