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

Порой при разработке веб-страниц иногда требуется «спрятать» конкретные элементы. Вы, конечно, можете просто удалить эти элементы из HTML-разметки. Но это не выход из положения. Чтобы сохранить элемент, но скрыть его, необходимо использовать CSS или HTML hidden.

Два самых распространенных способа скрыть элемент - это свойства CSS «display» и «visibility». На первый взгляд, кажется, что оба свойства делают одно и то же. Но каждое из них имеет свои отличительные особенности, о которых следует знать.

Visibility

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

Если вы размещаете на веб-странице тег DIV и используете CSS, чтобы придать ему размер 100 на 100 пикселей, свойство visibility: hidden делает блок невидимым на экране. Но текст, следующий за ним, будет размещаться таким образом, словно этот блок все еще присутствует на странице.

Я бы использовал hidden HTML input, чтобы сначала спрятать этот элемент, а затем вернуть его обратно при наведении курсора. Это один из примеров использования этого свойства.

Display

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

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

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

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

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!

Сергей Бензенкоавтор-переводчик

Подписывайтесь на наши группы в социальных сетях
Подписаться
Уведомить о
3 комментариев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
mk3mk

Про отличие visibility: hidden и display: none - понятно.
А visibility: hidden чем отличается от opacity:0 ? Или это получается одно и тоже.
Тут есть отличие в том что opacity можно менять плавно, может пригодиться для анимаций. А visibility: hidden будет меняться резко .

Виктор Иванов
2 лет назад
Ответить на  mk3mk

opcaity и visibility — дико разные вещи. При opacity элемент всё еще на экране, просто вы его не видите и например, если там будут ссылки, то можно будет даже нажать на них, например, случайно. А вот при visibility: hidden, элемент не активен и всё, что у него внутри.

Корней Чуковский

Спасибо, все четко и никаких вопросов больше не возникает.