CSS border-Usage and examples of the 'spacing' property

border-The 'spacing' CSS property uses the separated border model to set the spacing between adjacent table cell borders. If the collapsed border model is used, this property will be ignored. Please seeborder-collapseProperty.

The table below provides usage instructions and version history for this property, as well as the syntax for using this property in JavaScript scripts.

border-The syntax of spacing

The syntax of this attribute is as follows:

border-spacing: [ length ]　1　or　2　values | initial | inherit

this border-The spacing attribute can take one or two space-separated length values.

• If specifiedone valuetheValueThe two values will be applied to both horizontal and vertical border spacing.

• If specifiedtwo valuesIf specified, the first sets the horizontal border spacing, and the second sets the vertical border spacing.

The following example demonstrates how to use border-spacing attribute.

　　table {
　　　border-collapse: separate;
　　　border-spacing:　10px　20px;
　　}

Attribute value

The following table describes the value of this attribute.

Browser compatibility

border-The compatibility of the spacing attribute of browsers, the numbers in the following table represent the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

For further reading

Please refer to the following tutorials:CSS table,CSS border,CSS3Border.

Table-related attributes:border-collapse,empty-cells,table-layout.