Какое свойство позволяет спрятать элемент, но сохранить занимаемое им пространство?

Свойство visibility: hidden для скрытия элемента с сохранением пространства

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

Ключевые отличия от display: none

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

/* Пример с visibility: hidden */
.hidden-with-space {
  visibility: hidden; /* Элемент невидим, но его "коробка" остаётся */
  width: 200px;
  height: 100px;
  background: lightblue;
}

/* Пример с display: none */
.removed-from-flow {
  display: none; /* Элемент полностью удалён из потока, пространство схлопывается */
  width: 200px;
  height: 100px;
  background: lightcoral;
}

Основные различия:

• visibility: hidden:

    *   Визуально скрывает элемент (он становится прозрачным).
    *   Элемент продолжает занимать место в **нормальном потоке документа**.
    *   Остаётся частью **доступности** (хотя и скрыт от экранных читалок по умолчанию).
    *   Может быть **целью событий мыши** (но события не срабатывают, так как элемент невидим).
    *   Можно показать дочерние элементы, установив им `visibility: visible`.

• display: none:

    *   Полностью удаляет элемент из **потока документа**.
    *   Пространство, которое он занимал, **схлопывается**, и соседние элементы смещаются.
    *   Элемент **исключается из дерева доступности** (не доступен для скринридеров).
    *   **Не рендерится** браузером, что может повысить производительность для сложных скрытых элементов.

Практический пример и использование

<div class="container">
  <div class="box visible">Box 1 (Видим)</div>
  <div class="box hidden-visibility">Box 2 (Скрыт, но место есть)</div>
  <div class="box hidden-display">Box 3 (Удалён из потока)</div>
  <div class="box visible">Box 4 (Видим)</div>
</div>

.container {
  border: 2px solid #333;
  padding: 10px;
}
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #4CAF50;
  text-align: center;
  line-height: 100px;
  color: white;
}
.hidden-visibility {
  visibility: hidden; /* Место остаётся, создаётся "пустой" промежуток */
}
.hidden-display {
  display: none; /* Место схлопывается, Box 4 примыкает к Box 1 */
}

В этом примере:

• Между Box 1 и Box 4 будет пустое место (100px + отступы), где находится невидимый Box 2.
• Box 3 не оставит следа, и Box 4 займёт позицию сразу после Box 1.

Особенности и сценарии применения

Когда использовать visibility: hidden:

1. Анимации и плавные переходы — для поэтапного появления/исчезания без "прыжка" соседних элементов.
2. Сохраняемые макеты — когда нужно временно скрыть контент, но не нарушать сетку или вёрстку.
3. Оптимизация рендеринга — если скрытый элемент сложный (с анимацией, видео), его выключение через display: none может быть дорогим при повторном показе.
4. Доступность — в комбинации с ARIA-атрибутами (aria-hidden="true") для тонкого управления доступностью.

Важное замечание: Свойство visibility имеет и другие значения:

• visible — элемент видим (значение по умолчанию).
• collapse — специфично для таблиц (скрывает строки/колонки, схлопывая пространство, как display: none для table-row/table-column).

Альтернативные подходы

Иногда аналогичного эффекта можно достичь другими методами:

• Прозрачность с сохранением кликабельности: opacity: 0 — элемент невидим, но полностью сохраняет своё место и остаётся интерактивным.
• Скрытие с сохранением для скринридеров: комбинация .visually-hidden { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); } — элемент скрыт визуально, но доступен для вспомогательных технологий.

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