Border-Spacing

Set the spacing between adjacent table cell borders.

Syntax
      border-spacing: Length [VertLength] | inherit ;

Length - The border space measured in px, em or pt.
inherit - Inherit from the parent element.

This only applies to the separated borders model, if collapsing borders are used, Border Spacing will be ignored.

If two values are given, the first sets horizontal spacing, and the second vertical spacing. Negative values are not allowed.
If border spacing is set to 0 the table cells will be pushed together, but two adjacent cells will still have two borders, unlike collapsed borders where all the borders around each cell (and the whole table) are collapsed into one.
This is equivalent to the old cellspacing property. Alternatively border-collapse: collapse; will remove all table cell border spacing.

Examples:
h1 { border-spacing: 5px; }
.emw3class { border-spacing: 2em 0.5em; }
#emw3id { border-spacing: 0px; }

Try it:

Heading 1contentcontentcontent
Heading 2contentcontentcontent
Heading 3contentcontentcontent

(CSS 2) Browser Support: All major browsers, IE 8.0+

“The Berlin Wall wasn't the only barrier to fall after the collapse of the Soviet Union and the end of the Cold War. Traditional barriers to the flow of money, trade, people and ideas also fell” ~ Fareed Zakaria

Related:

border-spacing - MDN Web Docs.
border - Shorthand to set all the border properties.
border-collapse - Collapse table borders.


Copyright © 2013-2022 Emw3.com
Some rights reserved