CSS 'border-spacing' Property Explained

The CSS 'border-spacing' property specifies the distance between the borders of adjacent table cells. Unlike table elements' cell padding attribute (now considered outdated HTML), 'border-spacing' applies only to CSS-styled tables with border-collapse set to separate. This property allows designers to control the spacing between table cells, enhancing table data's visual layout and readability.

CSS 'border-spacing' Property Examples

See the Pen CSS 'border-spacing' Property by Webzstore (@webzstore) on CodePen.

The 'border-spacing' property is essential for controlling the spacing between cells in CSS-styled tables, contributing to tabular data's aesthetic and functional presentation on web pages.

Browser Support For 'border-spacing' Property

1.0	1.0	1.0	8.0	4.0

CSS Syntax of the 'border-spacing' Property

border-spacing: length | initial | inherit;

• A single length value applies to both horizontal and vertical spacing.
• Two length values specify the horizontal (first value) and vertical (second value) spacing, respectively.

Usage of the 'border-spacing' Property

Use 'border-spacing' to adjust the space between table cell borders. This property is particularly useful for creating more visually appealing tables by providing adequate space between cells, thus improving legibility and overall design. It can be specified using one or two values, where the first value defines the horizontal spacing, and the second value (if present) represents the vertical spacing.

Property Values of the 'border-spacing' Property

• Length: Specifies the spacing between borders in length units (e.g., px, em).
• Initial: Resets the 'border-spacing' to its default value.
• Inherit: Inherits the 'border-spacing' from the parent element (useful for nested tables).

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website