边界崩溃有什么区别:崩溃; 和边界间距:0;

Question

是

border-collapse:collapse; 

和

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

相同？

Answer 1

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

根据MDN 在这里和这里

该border-collapseCSS属性确定表格边框是否分离或折叠.在分离的模型中,相邻的单元格各自具有不同的边界.在折叠模型中,相邻的表格单元共享边框.

和

的border-spacingCSS属性指定(只用于分离边框模型)相邻的表格单元格的边界之间的距离.这相当于cellspacing表示HTML中的属性,但可选的第二个值可用于设置不同的水平和垂直间距.

该border-spacing值也沿着表的外边缘使用,其中表的边界与第一个/最后一列或行中的单元格之间的距离是相关(水平或垂直)border-spacing和相关(顶部,右侧,桌子底部或左边的填充物.

此属性适用于只当border-collapse是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>