Чем отличается граница-коллапс: коллапс; и интервал границы: 0;

Question

Является

border-collapse:collapse; 

а также

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

тот же самый?

Answer 1

Они разные! (См. Фрагмент ниже для подтверждения).

---

Согласно MDN здесь и здесь

border-collapse Свойство CSS определяет, будут ли границы таблицы разделены или свернуты. В отдельной модели смежные ячейки имеют свои собственные четкие границы. В свернутой модели соседние ячейки таблицы имеют общие границы.

а также

border-spacing Свойство CSS определяет расстояние между границами соседних ячеек таблицы (только для модели с разделенными границами). Это эквивалентно 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>