В чем разница между 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, элемент не активен и всё, что у него внутри.

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

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