Войти
Регистрация

Display: none и Visibility:hidden - в чем разница?

Display: none и Visibility:hidden

Здравствуйте, друзья!

Часто при создании сайта необходимо скрыть какой-то элемент на сайте и при необходимости снова вывести его.

Если просто удалить его из HTML кода это доставит неудобства, т.к. если у Вас будут десятки страниц сайта, то удалять элемент в каждой странице будет долго и неудобно.

Скрыть и показать элемент можно с помощью свойств CSS "display" и visibility.

Оба эти свойства скрывают элементы на сайте, но по-разному.

Visibility

Данное свойство принимает 2 значения: hidden и visible, т.е. скрывает и показывает элемент.

Элемент скрывается так, как-будто он все еще находится на странице сайта, т.е. занимает место, но его не видно.

Если Вы создадите блок шириной и высотой в 100 пикселей, а затем скроете его с помощью visibility:hidden, то блока видно не будет, но будет пустое место шириной и высотой в 100 пикселей.

Display

Данное свойство принимает несколько значений, вот основные:

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

Здесь значение none скрывает элемент так, что его не видно и он не занимает место на сайте. Его видно в HTML-коде, но в потоке документа его нет.

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

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

А теперь наглядные примеры. Создадим разметку блока с элементами и зададим им стиль - высоту и ширину:

<div>
  <p>Произвольный текст # 1</p>
  <p>Произвольный текст # 2</p>
  <p>Произвольный текст # 3</p>
  <p>Произвольный текст # 4</p>
  <p>Произвольный текст # 5</p>
</div>

Давайте ко второму абзацу применим display:none и visibility:hidden и увидим результат следующий:

Произвольный текст # 1

Произвольный текст # 2

Произвольный текст # 3

Произвольный текст # 4

Произвольный текст # 5

Произвольный текст # 1

Произвольный текст # 2

Произвольный текст # 3

Произвольный текст # 4

Произвольный текст # 5

Как видите в первом блоке абзац исчез, во втором скрылся, оставив за собой пустое место.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?