Різниця між visibility: hidden та display: none

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

Ключові Відмінності

display: none

Елемент повністю видаляється з потоку документа
Не займає місця на сторінці
Не впливає на позицію інших елементів
Не доступний для екранних читалок (зазвичай)
Не можна анімувати перехід між display: none та display: block

visibility: hidden

Елемент залишається в потоці документа
Займає місце на сторінці (невидимий)
Впливає на позицію інших елементів (залишає порожнє місце)
Не доступний для екранних читалок
Може бути анімований через властивість visibility

Візуальне Порівняння

html

<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>

css

.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, коли:

Елемент не потрібен у макеті: Наприклад, приховування модальних вікон, коли вони не відкриті
Потрібно повністю видалити елемент: Для мобільних меню, які повинні з'являтися лише при натисканні
Оптимізація продуктивності: Коли елемент містить багато контенту, який не потрібен

css

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

.modal.active {
  display: block;
}

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

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

Коли Використовувати visibility: hidden

Використовуйте visibility: hidden, коли:

Потрібно зберегти місце в макеті: Для елементів, які тимчасово приховані, але повинні зберігати своє місце
Анімації появи/зникнення: Коли потрібно плавно показувати/приховувати елемент
Приховування без зміни макету: Коли приховування не повинно впливати на позиціонування інших елементів

css

/* Плавна поява/зникнення */
.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

css

.invisible-opacity {
  opacity: 0;
  /* Елемент невидимий, але займає місце і залишається інтерактивним */
}

Відмінність:

opacity: 0 — елемент невидимий, але залишається інтерактивним (можна натискати)
visibility: hidden — елемент невидимий і не інтерактивний

position: absolute + left: -9999px

css

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

Цей метод використовується для приховування елементів з виду, але збереження їх доступності для екранних читалок.

Таблиця Порівняння

Властивість	Займає місце	Інтерактивний	Доступний для екранних читалок	Може бути анімований
`display: none`	Ні	Ні	Ні	Ні
`visibility: hidden`	Так	Ні	Ні	Так
`opacity: 0`	Так	Так	Так	Так

Вибирайте метод приховування в залежності від ваших потреб: використовуйте display: none для повного видалення з макету, visibility: hidden для збереження місця, і opacity: 0, якщо елемент повинен залишатися інтерактивним.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань