CSS border-spacing property

 The function of the CSS border-spacing property is to design the distance between the borders of the web table fields. It is only applicable when the border is set to separate mode. The so-called table border separation mode can be set through "border-collapse:separate;". It will be mentioned in the example. The effect of the CSS border-spacing property is similar to the cellspacing of HTML tables , but it can be controlled in a wider range. Just like the example, we can control the distance between the horizontal or vertical table fields, but the cellspacing of HTML ca n’t do that. The horizontal and vertical field distances are designed separately. This is where CSS is more evolved than HTML . Then let's take a look at the syntax rules of CSS border-spacing property. CSS border-spacing property syntax rules

border-spacing: the horizontal distance between table fields and the vertical distance between table fields;

There are two parameters in the basic syntax of CSS border-spacing property. The first is to control the horizontal distance between table fields, and the second is to control the vertical distance between table fields. The unit can use standard css such as px and cm. The length unit, but it is recommended to use the px general unit. The two parameters do not have to be written out. If you only write one, it means that the horizontal distance or the vertical distance is the same. This effect is the same as the HTML cellspacing property. If you want to separate the horizontal distance and the vertical distance of the table column When designing, you must also use the "border-collapse:separate;" effect mentioned in the first paragraph to avoid some browsers not supporting it. In addition, not all browsers support the CSS border-spacing property, especially some versions of IE browsers. Older IE browsers almost don’t support the effect of the CSS border-spacing property. Instead, they support the HTML cellspacing property. Okay, here are the grammatical rules of HTML cellspacing attribute. If you have time, I suggest you refer to it.

• HTML table cellspacing attribute

Then we prepared several practical application examples of CSS border-spacing for your reference.

CSS border-spacing property example 1: the same distance between horizontal and vertical

<table style="border-spacing:10px;" border="1">
<tr><td>Table fields</td><td>Table fields</td></tr>
<tr><td >Table field</td><td>Table field</td></tr>
</table>

The effect of the example

Table field	Table field
Table field	Table field

Example 1 only designs the effect that the horizontal and vertical distances between the table fields are the same. The distance given here is 10px. We can see that in addition to the 10px distance between the fields, the surrounding fields of the table and the table border are actually The distance between them is also 10px, which is the effect of css border-spacing.

CSS border-spacing property example 2: The distance between horizontal and vertical is different

<table style="border-collapse:separate; border-spacing:40px 10px;" border="1">
<tr><td>table fields</td><td>table fields</td></ tr>
<tr><td>Table field</td><td>Table field</td></tr>
</table>

The effect of the example

Table field	Table field
Table field	Table field

The second example is a bit more special, because we added the effect of the "border-collapse:separate;" property, and also used the two parameter values ​​of border-spacing, so that the horizontal distance between the table fields has a distance of 40px, and the vertical field There is a distance of 10px between them, and the distance from the border of the table in the same direction is handled by comparison. Example Two effects are original HTML 's table cellspacing attribute can not effect, sometimes quite easy yo!

➤For an extended study of the border-collapse property, please refer to: CSS border-collapse property for