Справочник HTML & CSS

visibility

Скрывает элемент, но сохраняет занятое им место.

Синтаксис

visibility: hidden;

Значения

Параметр	Тип	Описание
visible	keyword	Видим (по умолчанию).
hidden	keyword	Невидим, но место остаётся.
collapse	keyword	Для строк и столбцов таблицы — скрывает их как `display: none`.

Примеры

visibility: hidden оставляет пустое место, display: none — нет:

<style>
  span { background: lavender; padding: 4px; }
</style>
 
<p><span>One</span> <span style="visibility: hidden;">Two</span> <span>Three</span></p>
<p><span>One</span> <span style="display: none;">Two</span> <span>Three</span></p>

Примечания

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

См. также

display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
opacity — Прозрачность всего элемента вместе с содержимым.

Вопросы и ответы по теме

В учебнике

Свойство display — Блочные и строчные элементы, значения block, inline, inline-block и none, скрытие элементов.

Спасибо, что читаете!