CSS border-spacing property
The border-spacing property in CSS is used to set the distance between the borders of adjacent cells in a table. This property is effective only when the border-collapse property is set to separate. It controls the spacing between the borders of table cells, providing control over the layout and appearance of the table.
Syntax
table {
border-spacing: length;
}
table: The HTML table element to which you want to apply the border spacing.length: The space between the borders of adjacent cells. This can be specified using length units likepx,em,rem, etc. You can also specify two values to control horizontal and vertical spacing separately.
Values
Single Value:
- Description: Sets the same spacing for both horizontal and vertical spacing between table cells.
- Example:
border-spacing: 10px;sets 10 pixels of space between all adjacent table cells.
Two Values:
- Description: The first value sets the horizontal spacing, and the second value sets the vertical spacing between table cells.
- Example:
border-spacing: 15px 20px;sets 15 pixels of horizontal spacing and 20 pixels of vertical spacing.
Usage Example
Here’s how to use the border-spacing property in CSS:
Example
/* Table with border spacing */
table {
border-collapse: separate; /* Ensures borders are kept separate */
border-spacing: 10px 15px; /* Sets horizontal spacing to 10px and vertical spacing to 15px */
}
th, td {
border: 1px solid black; /* Apply a border to table cells */
padding: 8px; /* Add padding to table cells */
}
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Spacing Example</title>
<style>
/* Include the CSS from the example above here */
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
border-spacing: 10px 15px;:- Sets a horizontal spacing of
10pxand a vertical spacing of15pxbetween the borders of adjacent table cells.
- Sets a horizontal spacing of
border-collapse: separate;:- Ensures that borders between cells are kept separate, allowing the
border-spacingproperty to take effect.
- Ensures that borders between cells are kept separate, allowing the
Important Points
Compatibility:
- The
border-spacingproperty is only effective when theborder-collapseproperty is set toseparate. Ifborder-collapseis set tocollapse,border-spacingwill have no effect.
- The
No Inheritance:
- The
border-spacingproperty does not inherit from parent elements. It only affects the table it is applied to.
- The
Negative Values:
- Negative values are not valid for the
border-spacingproperty. Only positive length values are acceptable.
- Negative values are not valid for the
Browser Compatibility:
- The
border-spacingproperty is well-supported across modern browsers. However, it’s a good practice to test across different browsers to ensure consistent behavior.
- The