Чем отличаются display: none и visibility: hidden?

Отличие display: none от visibility: hidden

• CSS-свойства для управления отображением элементов
• display: none — элемент исключается из потока документа
• layout формируется заново, поэтому место под элемент не сохраняется
• сам элемент и его потомки не отображаются и не занимают места
• visibility: hidden — элемент становится невидимым, однако сохраняет место в layout
• элемент нельзя увидеть, но он продолжает влиять на положение соседних элементов
• свойство применяют, если структуру страницы нужно сохранить, скрыв только содержимое

Итог: display: none исключает элемент из DOM-раскладки, а visibility: hidden делает его невидимым, не освобождая занимаемое место.

Развернутый ответ

Краткий ответ

Свойства display: none и visibility: hidden скрывают элементы на странице, однако воздействуют на layout по-разному. При использовании display: none элемент исчезает из визуального потока, а занимаемая им область схлопывается: соседние элементы располагаются так, словно этого элемента не существует. visibility: hidden, напротив, делает элемент невидимым, но оставляет за ним пространство на странице.

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

• При display: none элемент не выводится и не занимает места, поэтому на положение соседних блоков он не влияет. Сам элемент и его дочерние узлы не участвуют в рендеринге и обычно не учитываются средствами доступности.
• При visibility: hidden содержимое скрыто, но область элемента остаётся, поэтому layout сохраняется без изменений. Элемент продолжает находиться в DOM, и некоторые assistive technologies могут его распознавать.
• Воздействие на интерактивность: в обоих вариантах элемент нельзя нажать или сфокусировать, однако при использовании visibility: hidden он всё равно продолжает занимать пространство.

Когда применять на практике

В React 18 и современных SPA-разработках display: none нередко применяют для условного монтирования компонентов или их полного скрытия, чтобы они не воздействовали на layout. Если для анимации перехода требуется оставить область элемента, одновременно скрыв его содержимое, используют visibility: hidden. Например, в бегущих строках и модальных окнах, где важен плавный переход, visibility комбинируют с opacity и transition.