In this section, we will learn what the border-spacing property is and how to use it in CSS.
Click here to run the example of border-spacing property.
CSS border-spacing Property Definition and Usage
CSS provides a property called `border-spacing` by which we can horizontally as well as vertically set a space between the cells of a table in an HTML document.
Note: you can apply this property on a <table> element.
CSS border-spacing Property Syntax
border-spacing: horizontal-distance vertical-distance;
CSS border-spacing Property Value
The `border-spacing` property takes two values.
- The first value is the horizontal distance of each table cell from its neighbor.
- The second value is the vertical distance of each table cell from its neighbor.
If you set only one value, it will be used for both horizontal and vertical distances from each cell to its neighbor.
Note: if `border-collapse` property is set to “collapse” then no-matter what value is set for `border-spacing`, there is not going to be any gap between table cells.
Example: border-spacing property in CSS
See the Pen border-spacing property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-spacing Property Work?
In this example, we’ve set the border-space property for the table with the value 2em. So that means both horizontal and vertical distances should be 2em.
Example: padding in a table
See the Pen padding in a table by Enjoy Tutorials (@enjoytutorials) on CodePen.
Example: CSS table cellspacing
See the Pen CSS table cellspacing by Enjoy Tutorials (@enjoytutorials) on CodePen.
Note that in this example, even though we’ve used the border-spacing property to set some space between cells of the table, nothing happened!
This is because we also used the `border-collapse` property to collapse the spaces between each cell! So the border-spacing won’t work because the `border-collapse` has a higher priority hence took precedence.
