How to use the CSS border-spacing property

The border-spacing property is used to specify the border of adjacent cells and the spacing between the borders. The border-spacing property is only effective when the value of the border-collapse property is separate. This article will introduce to you the usage of CSS border-spacing attribute. Let’s take a look at the specific content.

Let’s first take a look at What is the border-spacing attribute in CSS?

The border-spacing property specifies the spacing between the edges of adjacent cells of the table border.

However, it only works when separate is specified using border-collapse.

Let’s look at a specific example

HTML code

<div class="demo">
<table>
<tr>
<td>文字内容</td>
<td>文字内容</td>
</tr>
<tr>
<td>文字内容</td>
<td>文字内容</td>
</tr>
</table>
</div>

CSS code

.demo table {
  border: 2px solid #0000000;
  border-collapse: separate;
  border-spacing: 15px;
}
.demo table td {
  border: 2px solid #d49fc2;
}

is displayed on the browser The effect is as follows: the spacing between cells appears.

If you change the value of the border-spacing attribute to 50px, the effect displayed on the browser is as follows, and the spacing between adjacent cells will become larger.

This article ends here. For more exciting content about CSS, you can go to the CSS video on the php Chinese website Tutorial Learn further! ! !

The above is the detailed content of How to use the CSS border-spacing property. For more information, please follow other related articles on the PHP Chinese website!