![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-spacing Property
![CSS border-spacing Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-spacing.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-spacing
property in CSS is used to set the spacing between the borders of adjacent table cells.
This property is particularly useful when you want to control the amount of space between the cells of a table, giving you more control over the table's layout and appearance.
💡 Syntax
The syntax for the border-spacing
property is as follows:
table {
border-spacing: length [length];
}
- The first length value sets the horizontal spacing between the cells.
- The optional second length value sets the vertical spacing. If only one value is provided, it applies to both horizontal and vertical spacing.
🎛️ Default Value
The default value of the border-spacing
property is 0, meaning there is no space between the borders of adjacent cells.
🏠 Property Values
Value | Description |
---|---|
length | A positive value (e.g., 10px, 1em, etc.) that defines the space between adjacent table cells. It can be specified in any CSS length unit. |
initial | Sets the property to its default value, which is 0. |
inherit | Inherits the border-spacing value from the parent element. |
📄 Example
In this example, we'll apply border-spacing
to a table to add spacing between the cells.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-spacing Example</title>
<style>
table {
border-spacing: 10px 15px;
border: 1px solid black;
}
td {
border: 1px solid gray;
padding: 10px;
}
</style>
</head>
<body>
<h1>Table with Custom Border Spacing</h1>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
In this example, the border-spacing
property is set to 10px horizontally and 15px vertically, creating noticeable space between the table cells.
🖥️ Browser Compatibility
The border-spacing
property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it's a good practice to test the appearance of your table in different browsers to ensure consistent rendering.
🎉 Conclusion
The border-spacing
property is a valuable tool for web developers looking to fine-tune the appearance of tables. By adjusting the space between cells, you can create a more visually appealing layout and better align the table with your overall design. Experiment with different spacing values to see how they affect the look and feel of your tables.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-spacing Property), please comment here. I will help you immediately.