Свойство display определяет должен ли отображаться и как именно должен отображаться элемент, а свойство visibility определяет то, будет ли элемент видимым или нет.
Скрывание элемента — display:none или visibility:hidden
Вы можете скрыть элемент двумя способами. Для этого надо задать:
- display:none
- visibility:hidden
При этом надо помнить, что эти способы дают разный результат:
1. visibility:hidden скрывает элемент, но пространство, которое он занимал не может быть занято другим элементом. Элемент скрывается, но оказывает влияние на разметку страницы.
h1.hidden {visibility:hidden;}
2. display:none не только скрывает элемент, но и удаляет его из разметки страницы. Элемент скрывается, страница отображается так, как будто элемента нет.
h1.hidden {display:none;}
Свойство Display — блочные и строчные элементы
Блочный элемент занимает всю строку, на этой же строке не может быть другого элемента.
Примеры блочных элементов:
Строчный элемент занимает необходимое ему пространство (в зависимости от своего содержимого) и может соседствовать с другими строчными элементами на одной строке.
Примеры строчных элементов:
Изменение отображения элемента
Изменение отображения строчного элемента как блочный и наоборот используется в веб-разработке (например, при создании горизонтального меню) и не отходит от веб-стандартов.
Следующий пример демонстрирует то, как можно отображать пункты списка как строчные элементы:
А в этом примере строчный элемент отображается как блочный:
span {display:block;}
Заметка: изменение отображения элемента не изменяет тип элемента. Это значит, что после изменения отображения строчного элемента на блочный, вы не можете вкладывать в него блочные элементы.