CSS의 border-spacing 속성은 HTML 표(table)에서 셀과 셀 사이의 간격을 지정합니다. 이 속성은 하나 또는 두 개의 값을 가질 수 있으며, 값은 반드시 길이 단위(px, em 등)로 작성해야 합니다.
값을 두 개 지정할 경우 첫 번째 값은 가로 간격, 두 번째 값은 세로 간격에 적용됩니다. 값을 하나만 지정하면 가로와 세로 모두 동일한 간격이 적용됩니다.
또한 border-spacing 속성이 정상적으로 작동하려면 표의 border-collapse 속성이 separate(기본값)로 설정되어 있어야 합니다.
예제
아래 코드를 실행하면 표 셀 사이의 간격이 어떻게 설정되는지 확인할 수 있습니다:
<html>
<head>
<style>
table.one {
border-collapse:separate;
width:300px;
border-spacing:15px 40px;
}
</style>
</head>
<body>
<table class = "one" border = "2">
<caption>border-spacing 속성 예제</caption>
<tr><td> India </td></tr>
<tr><td> UK </td></tr>
</table>
<br />
</body>
</html>코드 설명
위 예제에서 border-spacing: 15px 40px;는 셀 사이의 가로 간격을 15px, 세로 간격을 40px로 지정합니다. 브라우저에서 실행하면 셀들이 세로 방향으로 더 넓게 벌어져 있는 것을 확인할 수 있습니다.