Manuales 
border-spacing 6i5k5g
The border-spacing property is used to specify the distance between the borders of adjacent border cells. 3m133g
It is also used to specify (or add to) the distance between the table borders and the borders of cells at the table’s edges (cells belonging to the first and last rows and columns).
It takes one or two length values that determine the vertical and horizontal spacing. If one value is specified, it gives both the vertical and horizontal spacing. If two values are specified, the first one gives the horizontal spacing and the second one gives the vertical spacing.
When the value of the border-spacing property is used to determine the distance between the table borders and the cells at its edges, the spacing is added to any padding applied to the table. The distance between the table border and the borders of the cells on the edge of the table is the table’s padding for that side, plus the relevant border spacing distance. For example, on the right hand side, the distance is the table’s padding-right value plus the horizontal border-spacing.
The border-spacing property only applies when the value of the border-collapse property is separate, because otherwise, if the borders are collapsed with a collapse value, there won’t be any spaces between the borders.
Official Syntax 3xs5l
- Syntax:
border-spacing: <length> <length>? | inherit
- Initial: 0
- Applies To: elements with ‘table’ and ‘inline-table’ display
- Animatable: no
Values u704t
- <length> <length>?
-
One or two
<length>values. (The question mark indicates the second value is optional.) If one value is specified, it gives both the vertical and horizontal spacing. If two values are specified, the first one gives the horizontal spacing and the second one gives the vertical spacing.See the
<length>entry for a list of possible values. Negative values are not allowed. - inherit
- The border spacing is inherited from the element’s parent.
Examples 2h2053
table {
border-collapse: separate;
border-spacing: 1em;
padding: .5em;
}
Live Demo 6b4m17
The table in the following demo has a padding and a border spacing set to it. Try changing the values to see how the spacing changes between the cells and around them.
View this demo on the Codrops PlaygroundBrowser 572e63
The border-spacing property is ed in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.