gpt4 book ai didi

html - border-collapse : collapse; and border-spacing: 0;有什么区别

转载 作者:太空狗 更新时间:2023-10-29 14:50:59 26 4
gpt4 key购买 nike

border-collapse:collapse; 

border-spacing: 0px;   /* only active/useful with option "separate" */
border-collapse:separate;

一样吗?

最佳答案

它们是不同的!(请参阅下面的代码段以确认)。


根据 MDN herehere

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

This property applies only when border-collapse is separate.


所以这是一个带有几个示例的 SNIPPET

body {
margin: 0;
font-family: Arial;
}
table {
width: 100%;
margin:30px 0
}
td {
border: 1px solid red
}
.collapse {
border-collapse: collapse;
}
.separate {
border-collapse: separate;
}
.no-spacing {
border-spacing: 0
}
.spacing {
border-spacing: 10px
}
<h4>Borders will collapse and therefore no space between them</h4>
<table class="collapse no-spacing">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<h4>Borders will try to separate between them but then using border-spacing:0 will join the borders without collpasing (looking like has double borders)</h4>
<table class="separate no-spacing">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<hr />

<h3> 2 more examples </h3>
<h4>Border-spacing won't work due to only applies when border-collapse isset to separate</h4>
<table class="collapse spacing">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<hr />
<h4>Borders will separate between them due to having border-spacing:10px and because border-collapse has separate as initial value</h4>
<table class="spacing">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

关于html - border-collapse : collapse; and border-spacing: 0;有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36035461/

26 4 0