Разница между "видимостью: коллапсом" и "отображением: нет"

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

Ответ 1

Краткая версия:

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

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

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

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

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

Ссылка W3C

Ответ 2

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

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

Ресурсы:

В той же теме:

Ответ 3

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

Есть три исключения, о которых я знаю: table-rows, table-columns и flex items, в которых visibility: collapse ведет себя как display: none, но с одним существенным отличием: "strut". Вы можете думать о расположении как нулевой размер заполнителя, который не претендует на какое-либо свое место в процессе компоновки, но тем не менее все еще является частью структуры форматирования и участвует в вычислениях определенного размера.

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

"Не использовать 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>

Ответ 4

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