Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS border-spacing property
The border-spacing CSS property controls the distance between adjacent table cell borders. It only applies to tables with border-collapse: separate and accepts one or two length values.
Syntax
border-spacing: horizontal vertical; border-spacing: value; /* applies to both directions */
Parameters
- One value: Sets equal spacing horizontally and vertically
- Two values: First value sets horizontal spacing, second sets vertical spacing
- Units: Any CSS length unit (px, em, rem, etc.)
Example: Different Spacing Values
<html>
<head>
<style>
table {
border-collapse: separate;
border: 2px solid #333;
width: 300px;
margin: 20px 0;
}
.example1 {
border-spacing: 10px;
}
.example2 {
border-spacing: 15px 40px;
}
.example3 {
border-spacing: 0;
}
td {
border: 1px solid #666;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table class="example1">
<caption>Equal spacing: 10px</caption>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
<table class="example2">
<caption>Horizontal: 15px, Vertical: 40px</caption>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
<table class="example3">
<caption>No spacing: 0px</caption>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>
</body>
</html>
Key Points
-
Requires separate borders: Only works with
border-collapse: separate - Inherited property: Child elements inherit spacing from parent tables
- Default value: Usually 2px in most browsers
-
No effect on collapsed borders: Ignored when
border-collapse: collapse
Comparison
| Value | Horizontal Spacing | Vertical Spacing | Use Case |
|---|---|---|---|
10px |
10px | 10px | Equal spacing |
15px 5px |
15px | 5px | Wide columns, tight rows |
0 |
0px | 0px | Touching borders |
Conclusion
The border-spacing property provides fine control over table cell separation. Use it with border-collapse: separate to create visually appealing table layouts with custom spacing.
Updated on: 2026-03-15T23:18:59+05:30
87 Views
Advertisements