Чем display:none отличается от visibility:hidden на практике?

Задан 17 месяцев назад911 просмотров3 ответа

Прячу элемент. Видел оба варианта — display: none и visibility: hidden. Выглядят одинаково (элемента не видно). В чём разница и что выбрать?

Семен Протапопов 🐣 Птенец

спросил 17 месяцев назад

3 ответа

✓ Принятый ответ — помог автору

Главная разница — занимает ли элемент место.

display: none — элемент полностью исчезает из потока. Места не занимает, как будто его нет в разметке. Соседи сдвигаются на его место.
visibility: hidden — элемент невидим, но место за ним остаётся. Получается «дырка» нужного размера.

Ещё нюансы:

display: none нельзя анимировать переходом (до недавнего времени совсем), visibility — можно комбинировать с opacity.
Скринридеры и поиск по странице (Ctrl+F) обычно игнорируют display: none, а visibility: hidden тоже скрывает от них.

Правило: нужно убрать элемент совсем — display: none. Нужно «зарезервировать» место (например, чтобы layout не прыгал) — visibility: hidden.

Софья Баранова 🥚 Яйцо

17 месяцев назад

sam jones ещё есть opacity: 0 — невидим, место занимает И ловит клики, в отличие от visibility:hidden · 17 месяцев назад

Коротко: display: none убирает элемент из потока (место схлопывается), visibility: hidden оставляет пустое место.

Арина Лебедева 🐣 Птенец

17 месяцев назад

display: none — места нет. visibility: hidden — место есть.

dada ya 🐣 Птенец

17 месяцев назад

Войдите, чтобы ответить на вопрос.