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

При работе с CSS, разработчики часто сталкиваются с необходимостью скрывать элементы на веб-странице. Два наиболее распространённых свойства для этой задачи - это display и visibility. Давайте разберем, как эти свойства различаются и в каких случаях их лучше использовать.

1. display: none;

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

Пример:

<div class="box">Я видимый</div>
<div class="box" style="display: none;">Я скрыт</div>
<div class="box">Я тоже видимый</div>

CSS:

.box {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

Результат:

В этом примере второй <div> с текстом "Я скрыт" не будет отображаться на странице и не будет занимать место, поэтому первый и третий <div> будут прилегать друг к другу.

2. visibility: hidden;

Когда элемент имеет стиль visibility: hidden;, он остается в потоке документа, но становится невидимым. В отличие от display: none;, другие элементы по-прежнему оставляют место для этого элемента, когда он скрыт.

Пример:

<div class="box">Я видимый</div>
<div class="box" style="visibility: hidden;">Я скрыт</div>
<div class="box">Я тоже видимый</div>

Во втором <div> содержимое "Я скрыт" не будет видно, но другие элементы все равно будут расположены так, как будто скрытый элемент занимает свое место.

Итог

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

Понимание этих двух свойств поможет вам более эффективно управлять отображением элементов на веб-странице, улучшая пользовательский интерфейс и взаимодействие с пользователем.