CSS: какая разница между visibility:hidden и display:none?

CSS, HTML, Вопросы и ответы
28 февраля 2012

Вопрос

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


Ответ №1

Ни в коем случае!

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

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

Сейчас продемонстрирую на примере:

<div style="width:100px;height:40px;background:aqua;"></div>
<div style="width:100px;height:40px;display:none;"></div>
<div style="width:100px;height:40px;background:gray;"></div>
Пример
<div style="width:100px;height:40px;background:aqua;"></div>
<div style="width:100px;height:40px;visibility:hidden;"></div>
<div style="width:100px;height:40px;background:gray;"></div>
Пример

1 комментарий

Добавить комментарий


(обязательно)