Разница между «видимость: свернуть» и «отображение: нет»

В чем разница между visibility:collapseи display:none?

Укороченная версия:

Первый используется для полного скрытия элементов таблицы. Последний используется, чтобы полностью скрыть все остальное.

Длинная версия :

visibility: collapseскрывает элемент полностью (чтобы он не занимал места в макете), но только тогда, когда элемент является элементом таблицы .

При использовании с элементами, отличными от элементов таблицы, visibility: collapseбудет действовать как visibility: hidden. Это делает элемент невидимым, но он все равно будет занимать место в макете.

display: noneШкуры элемент полностью , поэтому она не занимает никакого места в макете, но она не должна быть использована на элементах таблицы.

Ссылка W3C

visibility: collapseведет себя точно так же, как и visibility: hiddenв большинстве контекстов форматирования: пространство, необходимое для элемента, «зарезервировано» в макете, но сам элемент не отображается, оставляя пустое пространство там, где он был бы.

Я знаю три исключения: строки таблицы, столбцы таблицы и гибкие элементы, в которых visibility: collapseведет себя как display: none, но с одним существенным отличием: стойка. Вы можете думать о стойке как о заполнителе нулевого размера, который не требует никакого собственного пространства в процессе макета, но, тем не менее, все еще является частью структуры форматирования и участвует в некоторых вычислениях размера.

Например, свернутая строка таблицы не будет занимать какое-либо вертикальное пространство в таблице, но столбцы таблицы все равно будут иметь размеры, как если бы свернутая строка и ее содержимое были фактически видимы. Это сделано для того, чтобы столбцы не «раскачивались» при включении и выключении строк. Точно так же свернутый гибкий элемент не занимает места вдоль главной оси, но все же способствует поперечному размеру гибкой линии.

«Не использовать display: noneс таблицами» - ценное практическое правило, но оно не раскрывает всей картины.

• Используйте, display: noneесли вы не хотите, чтобы ваши скрытые элементы каким-либо образом участвовали в процессе компоновки таблицы (или гибкой линии).
• Использовать visibility: collapse если вы хотите динамически отображать и скрывать элементы, не дестабилизируя макет таблицы (или гибкой линии).

Вот фрагмент кода, демонстрирующий разницу между строкой таблицы display: noneи visibility: collapseдля нее:

.show-right-border {
  border-right: 1px black solid;
}

<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>

visibility:collapseследует использовать только на таблицах. На других элементах он будет действовать как visibility:hidden.

visibility:hiddenскрыть элемент, но по-прежнему занимать пространство элемента display:none, даже не сохраняя пространство.

Ресурсы :

• w3schools.com - видимость
• w3schools.com - дисплей

По той же теме:

• В чем разница между visibility: hidden и display: none
• Свойства CSS: отображение и видимость
• Отображение CSS: нет и видимость: скрыто
• Имеет ли opacity: 0 тот же эффект, что и visibility: hidden

visibility:collapseимеет display:noneповедение только для элементов таблицы. Для других элементов он должен отображаться как hidden.

Вы также можете применить visibility: collapseк элементу в контейнере flexbox (гибкий элемент). Он будет действовать так же, как вы применяете его к элементу с помощью display: table-rowилиdisplay: table-column