видимость

Чтобы скрыть элемент и удалить его из макета документа, установите свойство display в none вместо использования visibility.

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

Свойство visibility задаётся одним из ключевых значений, перечисленных ниже.

visible

Блок элемента отображается.

hidden

Блок элемента невидим (не отрисовывается), но всё ещё влияет на макет как обычно. Потомки элемента будут видны, если у них visibility установлено в visible. Элемент не может получить фокус (например, при навигации по индексам табуляции).

collapse

Ключевое слово collapse имеет разные эффекты для разных элементов:

• Для <table> строк, столбцов, групп столбцов и групп строк, строки или столбцы скрываются, а занимаемое ими пространство удаляется (как если бы display: none было применено к столбцу/строке таблицы). Однако размер других строк и столбцов всё ещё рассчитывается так, как если бы ячейки в скрытой строке/столбце были присутствуют. Это значение позволяет быстро удалить строку или столбец из таблицы, не заставляя пересчитывать ширину и высоту всей таблицы.
• Свёрнутые элементы flex и аннотации ruby скрываются, а занимаемое ими пространство удаляется.
• Для других элементов collapse обрабатывается так же, как hidden.

Использование значения visibility hidden для элемента удалит его из дерева доступности. Это приведет к тому, что элемент и все его дочерние элементы больше не будут объявляться технологией чтения с экрана.

При анимации значения visibility интерполируются между видимым и невидимым. Одно из начальных или конечных значений должно быть visible, иначе интерполяция не может произойти. Значение интерполируется как дискретный шаг, где значения функции сглаживания между 0 и 1 отображаются как visible, а другие значения функции сглаживания (которые встречаются только в начале/конце перехода или в результате функций cubic-bezier() со значениями y вне [0, 1]) отображаются как ближайшая конечная точка.

• Поддержка visibility: collapse отсутствует или частично некорректна в некоторых современных браузерах. Может быть неверно обработано как visibility: hidden для элементов, кроме строк и столбцов таблицы.
• При применении к строкам таблицы, если таблица содержит ячейки (<td> <tr> элементы), которые охватывают как видимые, так и скрытые строки, ячейка может отображаться неожиданным образом. Если охватывающая ячейка определена в скрытой строке, браузеры не отображают ячейку таблицы, как если бы ячейки в последующих строках были присутствуют с visibility: collapse применено. Когда ячейка определена в видимой строке и охватывает скрытую строку, содержимое ячейки не переформатируется, но отображение самой ячейки варьируется в зависимости от браузера. Большинство браузеров уменьшают размер блока ячейки на размер блока скрытой строки. Это означает, что содержимое может быть больше, чем ячейка в направлении размера блока. В зависимости от браузера, переполняющее содержимое либо обрезается, как если бы overflow: hidden было установлено, в то время как содержимое перетекает в последующую строку в других браузерах, как если бы overflow: visible было установлено. В других браузерах ячейка отображается так, как если бы строка не была скрыта, а все остальные ячейки в строке скрыты, как если бы visibility: collapse было установлено на отдельных ячейках, а не на самой строке.
• visibility: collapse может изменить макет таблицы, если таблица содержит вложенные таблицы внутри ячеек, которые скрыты, если visibility: visible не указано явно для вложенных таблиц.

visibility = 
  visible   |
  hidden    |
  collapse  

HTML

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</p>

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

HTML

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

• display