Разница между visibility: hidden и display: none

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

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

display: none

• Элемент полностью удаляется из потока документа
• Не занимает места на странице
• Не влияет на расположение других элементов
• Не доступен для скринридеров (обычно)
• Нельзя анимировать переход между display: none и display: block

visibility: hidden

• Элемент остается в потоке документа
• Занимает место на странице (невидимое)
• Влияет на расположение других элементов (оставляет пустое пространство)
• Не доступен для скринридеров
• Можно анимировать через свойство visibility

Визуальное сравнение

<div class="container">
  <div class="box">Box 1</div>
  <div class="box hidden-display">Box 2 (display: none)</div>
  <div class="box">Box 3</div>
</div>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box hidden-visibility">Box 2 (visibility: hidden)</div>
  <div class="box">Box 3</div>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
}

.hidden-display {
  display: none;
}

.hidden-visibility {
  visibility: hidden;
}

Результат:

• С display: none: Box 2 полностью исчезает, Box 3 сдвигается на место Box 2
• С visibility: hidden: Box 2 невидим, но его место остается пустым, Box 3 не сдвигается

Когда использовать display: none

Используйте display: none, когда:

1. Элемент не нужен в макете: Например, скрытие модальных окон, когда они не открыты
2. Нужно полностью убрать элемент: Для мобильных меню, которые должны появляться только при клике
3. Оптимизация производительности: Когда элемент содержит много контента, который не нужен

/* Модальное окно */
.modal {
  display: none;
}

.modal.active {
  display: block;
}

/* Мобильное меню */
.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
}

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

Используйте visibility: hidden, когда:

1. Нужно сохранить место в макете: Для элементов, которые временно скрыты, но должны сохранить свое пространство
2. Анимации появления/исчезновения: Когда нужно плавно показать/скрыть элемент
3. Скрытие без изменения макета: Когда скрытие не должно влиять на расположение других элементов

/* Плавное появление/исчезновение */
.fade-element {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

.fade-element.show {
  visibility: visible;
  opacity: 1;
}

/* Сохранение места для скрытого контента */
.tooltip {
  visibility: hidden;
  position: absolute;
}

.tooltip:hover {
  visibility: visible;
}

Комбинация с другими свойствами

opacity: 0

.invisible-opacity {
  opacity: 0;
  /* Элемент невидим, но занимает место и остается интерактивным */
}

Разница:

• opacity: 0 — элемент невидим, но остается интерактивным (можно кликать)
• visibility: hidden — элемент невидим и не интерактивен

position: absolute + left: -9999px

.sr-only {
  position: absolute;
  left: -9999px;
  /* Элемент скрыт визуально, но доступен для скринридеров */
}

Этот метод используется для скрытия элементов от глаз, но оставления их доступными для скринридеров (screen readers).

Таблица сравнения

Практический пример

/* Карточка с плавным появлением */
.card {
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
}

.card.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* Полностью скрытый элемент (не занимает места) */
.hidden {
  display: none;
}