Сохранение макета страницы при сокрытии элементов

При попытке скрыть HTML-элементы, не влияя на визуальный макет, использование видимости: скрыто может привести к к нежелательным результатам. Скрывая элемент от просмотра, он продолжает занимать то же место на странице.

Отключение отображения

Чтобы решить эту проблему, рекомендуется использовать свойство display. Если для отображения элемента установлено значение «нет», он фактически исчезает из визуального представления, как если бы он был полностью удален из DOM.

Рассмотрим следующий пример:

Изначально элемент div отображается нормально. Чтобы скрыть это:
#element {
  display: none;
}
Когда применяется display: none, элемент визуально отсутствует, освобождая место, которое он ранее занимал. Чтобы восстановить видимость элемента:
#element {
  display: block;  
}
Преимущества использования отображения: нет
Сохраняет макет страницы
Сохраняет положение элемента в HTML-коде
Позволяет легко снова отобразить элемент, установив display: block