В чем разница между видимостью: скрытой и отображаемой: нет?

Правила CSS visibility:hidden и display:none приводят к тому, что элемент не отображается. Являются ли эти синонимы?

Ответ 1

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

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

Например:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Замена [style-tag-value] на display:none приводит к:

test |   | test

Замена [style-tag-value] на visibility:hidden приводит к:

test |                        | test

Ответ 2

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

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

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

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

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

Ответ 3

Одна вещь, которую стоит добавить, хотя ее не спрашивали, заключается в том, что есть третий вариант сделать объект полностью прозрачным. Рассмотрим:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

Ответ 4

display:none удаляет элемент из потока макета.

visibility:hidden скрывает его, но оставляет пространство.

Ответ 5

Существует большая разница, когда речь идет о дочерних узлах. Например: если у вас есть родительский div и вложенный дочерний div. Поэтому, если вы пишете вот так:

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

В этом случае ни один из divs не будет виден. Но если вы пишете вот так:

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

Затем дочерний div будет виден, а родительский div не будет показан.

Ответ 6

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

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

Ответ 7

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

Visibility: hidden оставляет пространство в потоке документа, даже если вы больше не видите его.

Это может или не может иметь большое значение в зависимости от того, что вы делаете.

Ответ 8

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

Ответ 9

display:none скроет элемент и скроет пространство, которое заняло, тогда как visibility:hidden скроет элемент и сохранит пространство элементов. display: none также влияет на некоторые свойства, доступные из javascript в более старых версиях IE и Safari.

Ответ 10

В дополнение ко всем другим ответам существует важное различие для IE8: если вы используете display:none и пытаетесь получить ширину или высоту элемента, IE8 возвращает 0 (в то время как другие браузеры возвращают фактические размеры). IE8 возвращает правильную ширину или высоту только для visibility:hidden.

Ответ 11

visibility:hidden сохраняет пространство; display:none не делает.

Ответ 12

display: none;

Он не будет доступен на странице и не займет места.

visibility: hidden;

он скрывает элемент, но он все равно будет занимать то же место, что и раньше. Элемент будет скрыт, но все равно повлияет на макет.

visibility: hidden сохранение пространства, тогда как display: none не сохраняет пространство.

Показать Нет Пример: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Видимость Скрытый пример: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Ответ 13

Если свойство visibility установлено на "hidden", браузер все равно будет занимать место на странице для контента, даже если он невидим.
Но когда мы устанавливаем объект на "display:none", браузер не выделяет место на странице для своего содержимого.

Пример:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Подробнее

Ответ 14

visibility:hidden сохранит элемент на странице и займет это пространство, но не покажет пользователю.

display:none не будет доступен на странице и не займет места.

Ответ 15

visibility:hidden скрывает элемент, но он все равно будет занимать то же место, что и раньше. Элемент будет скрыт, но все равно будет влиять на макет.

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

Ответ 16

Еще одно отличие заключается в том, что visibility:hidden работы в действительно, действительно старых браузерах и display:none не делает:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Ответ 17

display:none; не будет отображать элемент и не будет выделять пространство для элемента на странице, тогда как visibility:hidden; не отобразит элемент на странице, но выделит место на странице. Мы можем получить доступ к элементу в DOM в обоих случаях. Чтобы лучше понять это, посмотрите следующий код: display: none vs visibility: hidden

Ответ 18

Разница выходит за рамки стиля и отражается в том, как элементы ведут себя при работе с JavaScript.

Эффекты и побочные эффекты display: none:

целевой элемент извлекается из потока документов (не влияет на макет других элементов);
затрагиваются все потомки (тоже не отображаются и не могут "выкинуть" это наследство);
измерения нельзя выполнить ни для целевого элемента, ни для его потомков - они вообще не отображаются, поэтому их clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), все возвращают 0 с.

Эффекты и побочные эффекты visibility: hidden:

целевой элемент скрыт от просмотра, но не выводится из потока и влияет на макет, занимая его обычное пространство;
innerText (но не innerHTML) целевого элемента и потомков возвращает пустую строку.