В чем разница между visibility:hidden и display:none?

display:none означает, что элемент, о котором идет речь, не будет отображаться на странице вообще (хотя с ним все еще можно взаимодействовать через DOM). Для него не будет выделено места между другими элементами.

visibility:hidden означает, что в отличие от display:none, элемент не виден, но для него все же выделяется место на странице. Элемент рендерится, просто он не виден.

Например:

test | <span style="[style-tag-value]">Подходящий стиль в этом теге</span> | test

Если заменить [style-tag-value] на display:none, результат будет таким:

test |   | test

Если заменить [style-tag-value] на visibility:hidden, результат будет таким:

test |                        | test

Они не являются синонимами.

display:none удаляет элемент из нормального потока страницы, позволяя другим элементам занять его место.

visibility:hidden оставляет элемент в нормальном потоке страницы, так что он все еще занимает пространство.

Представьте, что вы стоите в очереди на аттракцион в парке аттракционов, и кто-то в очереди начинает вести себя слишком агрессивно, поэтому охрана его удаляет. В этом случае все остальные в очереди переместятся на одну позицию вперед, чтобы заполнить образовавшееся пустое место. Это похоже на display:none.

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

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

Вопрос о различиях между свойствами display и visibility весьма актуален при работе с вложенными элементами. Рассмотрим два примера.

Если вы используете свойство display: none; для родительского элемента, как в следующем коде:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

В этом случае ни один из <div> не будет видим, так как при display: none; родительский элемент полностью исчезает из потока документа, следовательно, и все его дочерние элементы.

Теперь рассмотрим другой пример с использованием свойства visibility: hidden;:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Здесь родительский <div> будет невидим (при visibility: hidden;), но он все равно будет занимать место в документе. В результате, дочерний элемент <div id="child"> окажется видимым, хотя его родитель не отображается.

Таким образом, ключевое отличие заключается в том, что display: none; полностью исключает элемент из потока, в то время как visibility: hidden; лишь скрывает элемент, оставляя его "висеть" в пространстве.

Это не синонимы. Свойство display: none полностью удаляет элемент из потока страницы, и остальные элементы ведут себя так, как будто его нет.

В то время как visibility: hidden скрывает элемент от отображения, но не влияет на поток страницы, оставляя место для него.