Волшебное свойство display, или типы отображения элементов html

Часть первая, адаптированная под ИЕ7.

Css-свойство display задаёт тип отображения элемента. На русский язык его можно перевести фразой: «Веди себя как». То есть, берём любой элемент html и говорим ему: веди себя как… блок, строка, таблица или вообще как будто тебя нет.

Все существующие на данный момент значения свойства display:

• none
• block
• inline
• list-item
• inherit
• inline-block
• inline-table
• table
• table-row
• table-cell
• table-column
• table-header-group
• table-footer-group
• table-column-group
• table-row-group
• table-caption
• run-in

В CSS 2 были значения compact и marker, но в CSS 2.1 они исчезли и в CSS 3 не вернулись. Встретите в старых справках — не обращайте внимания.

К сожалению, возможности применения свойства display ограничивает браузер IE7, который из всех значений понимает только 4:  none, block, inline, list-item. Значение inline-block IE7 поддерживает лишь для строчных элементов. Также IE7 и IE8 элементы таблиц (table, tr, td, и другие) со значениями block и inline всё равно обрабатывает как табличные (и, похоже, в 9 и 10 положение не изменилось). Гугль Хром также не учитывает значение inline для таблиц.

Далее пойдёт речь о значениях свойства display, применимых в ИЕ7.

Заметьте: свойство display изменяет поведение элемента, но не классовую принадлежность. Так, по стандартам html в изначально строчные элементы нельзя вкладывать блочные, и изменение свойств через css не отменяет этого правила. Другими словами, если вы сделали span блочным, класть в него p, table или div всё равно не следует. Так же span или a нельзя вкладывать непосредственно в элемент body, т. к. в нём могут размещаться только элементы блочного типа. И обратно: элемент div со значением inline не может размещаться в элементах p или a, потому что их непосредственными потомками могут быть только элементы группы Inline.

Display: none: «веди себя так, как будто тебя нет»

Значение none свойства display делает любой элемент html невидимым. Действие правила display: none отличается от действия правила visibility: hidden тем, что первое прячет элемент полностью, как будто его нет вовсе, а второе делает его невидимым, но резервирует положенное под элемент место, оставляя «проём». Пример.

По умолчанию display имеет значение none у элементов head, style, script. Да-да! Если вы нечаянно назначите им другое значение display, вас может ждать surprise (если вы не пользуетесь IE). Вот такой: «Мы все тут блочные!». Или такой: «Мы все тут строчные!». Элементы head, title и css просто вываливают своё текстовое содержание в виде строки.

Возможное применение правила display: none

• Нехорошее:  чтобы скрыть блок текста или ссылок от людей и показать поисковикам. Не советую.
• Хорошее:  в сочетании с javascript для динамических эффектов — выпадающие меню, всплывающие справки, выезжающие и убирающиеся панельки, и т. п. Бывают очень полезны, если применять без фанатизма.

Display: block: «веди себя так, как блочный элемент», или форматирование по блочному принципу

Свойство display со значением block делает любой элемент блочным со всем набором блочных свойств, а именно:

• блочный элемент (block level element) образует одну прямоугольную область (block box), перед и после которой строка переводится;
• блок по умолчанию занимает всю доступную ширину;
• размеры блока могу изменяться свойствами width и height;
• к блочному элементу применимы вертикальные внешние отступы (margin-top, margin-bottom), а также отрицательные внешние отступы (margin-left: -100px или margin-top: -20px);
• внутренние вертикальные отступы (padding-top, padding-bottom) влияют на суммарную высоту блочной области;
• к блочным элементам неприменимо вертикальное выравнивание (vertical-align), зато применимо горизонтальное (text-align).

По умолчанию блочными являются элементы:

• html
• body
• div
• p
• h1-h6
• ul, ol, dl
• dt, dd
• address
• blockquote
• form
• fieldset
• pre

Если очень глубоко прикапываться, то html, body, dt и dd формально не входят в группу блочных элементов html, но по факту они образуют блочные области и ведут себя соответственно.

Остальные элементы становятся блочными только с помощью css (как уже говорилось, исключением являются табличные элементы в IE).

Зачем это может понадобиться? Например:

• поставить строчные элементы, например, картинки, в «столбик», а не в строку;
• сделать блочными ссылки в меню, чтобы оформить их как «плашки» — с отступами, полями и прочими красивостями;
• ну и, конечно, в скриптовых эффектах «скрыть-убрать» в паре с display: none.

Display: inline: «веди себя так, как строка», или форматирование по строчному принципу

Значение inline превращает любой элемент html в строчный, или инлайновый. Строчный элемент (inline level element):

• может размещаться на одной строке с другими строчными элементами;
• может переходить на следующие строки, образуя несколько строчных областей (inline boxes);
• занимают ширину по содержанию;
• пробелы или переводы строк между строчными элементами браузер отображает как один пробел;
• у незамещаемых строчных элементов размеры области не управляются свойствами width и height;
• внешние вертикальные отступы (margin-top, margin-bottom) на строчный элемент не действуют;
• горизонтальные внешние и внутренние отступы, а так же боковые рамки (border) действуют только на первую и последнюю из областей, образованных строчным элементом. Это проще показать, чем объяснять на словах, поэтому смотрим Пример. Внешние отступы (margin-left, margin-right) могут быть отрицательными;
• вертикальные внутренние отступы (padding-top, padding-bottom) влияют на общую высоту области, но не влияют на высоту строки, в которой она находится; в результате соседние строки могут перекрываться (предыдущие всегда перекрываются последующими); смотрим Пример;
• к строчным элементам применимо вертикальное выравнивание (vertical-align) по строчному типу; это значит, что область элемента смещается относительно строки, на которой располагается, и смещение можно задавать численно: Пример. Зато горизонтальное выравнивание (text-align) на строчные элементы не действует.

Зачем превращать блочный элемент в строчный? Например, чтобы превратить список в горизонтальное меню, назначив display: inline его пунктам; именно так реализовано верхнее меню и его нижний дубль на этом блоге. Или сделать фон заголовку не во всю ширину родителя, а по содержанию (по длине текста).

Display: list-item: «веди себя так, как пункт списка»

Пунктом списка по умолчанию является элемент li. Элемент с типом отображения list-item формирует две области: главную область (principal box) и область маркера (marker). Главная область ведёт себя по типу block и забирает на себя оформление, задаваемое в css. Маркер практически неуправляем: можно лишь изменить вид маркера через свойство list-style, а также через color и font-size (цвет и размер). Положением маркера управляет браузер, поэтому при замене стандартного маркера картинкой её не всегда удаётся выровнять кроссбраузерно. (Собственно, именно для работы с маркером и задумывалось несостоявшееся значение marker, и, видимо, именно по этой причине оно и не состоялось.)

Любой элемент, которому присвоено свойство display со значением list-item, отображается как пункт списка — с маркером, и к нему можно применять свойство list-style и его производные.

Справедливо и обратное: элемент li со свойством display: inline или block теряет маркер (в ИЕ7 — только для значения inline).

В следующий раз я надеюсь описать более заковыристые значения свойства display, которые не годятся для применения в ИЕ7. А вам случалось ими пользоваться? Какие ещё случаи применения свойства display вы встречали?