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

22 августа 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Часть первая, адаптированная под ИЕ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 вы встречали?

Отзывы (21) на «Волшебное свойство display, или типы отображения элементов html»
  1. Дмитрий (5 комментариев)

    Всякие встречали, но на практике необходимы только block, inline-block (который даже в ие6 с полтыка заводится), none, ну и остальные для переопределения к стандартному значанию свойства display.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Интересно получается: нужны «только эти… ну, и остальные тоже нужны». :)
      Вот inline-block никак не заводится ни в ие6, ни в ие7. Вместо него приходится подтыкать inline, что не всегда срабатывает в нужную сторону.

      Ответить на этот комментарий
      • Дмитрий (5 комментариев)

        display: inline с hasLayout?

        Ответить на этот комментарий
        • Княгиня (655 комментариев)

          Ну да. Правда, я, с hasLayout’ом почти не имела дела, ибо с самого начала была натаскана на стандарты w3c, а это свойство вылезает за их рамки. Но по жизни пришлось узнать и его.

          Ответить на этот комментарий
      • Alex_dem (1 комментарий)

        На самом деле старые ИЕ — это огромнейшая проблема для разработчиков. К счастью, в его последних версиях Майкрософт стал пирслушиваться к комьюнити и исправлять самые злостные пакости. С десятым ИЕ стало жить немного легче. Надеюсь, что эта тенденция сохранится и продолжиться!

        Ответить на этот комментарий
  2. Андрей (4 комментария)

    Действительно волшебное, особенно Display: none — «НЕХОРОШЕЕ» с ним творят, что кому-то хорошо, а кому-то плохо :(

    Ответить на этот комментарий
  3. Smirnova Nastya (1 комментарий)

    А объясните мне недалекой еще раз зачем может применяться «Display: inline:» его можно чем-нибудь заменить, например?

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      А зачем вам это?

      Ответить на этот комментарий
  4. DropIt (4 комментария)

    Княгиня, вы забыли про элемент dfn :) Он таки тоже блочный и иногда выручает. Почему-то мне не довелось пользоваться табличным отображением. Думаю, кое-где полезно.

    Спасибки, очень информативно.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Блочный ли? Вот что написано в DTD:

      <!ELEMENT dfn %Inline;> <!— definitional —>

      Так что не блочный, нет.

      Ответить на этот комментарий
  5. DropIt (4 комментария)

    А это пофигу, на мой взгляд. Смысл в том, что в него можно вкладывать кучу дургих элементов и это вполне валидно(чуть неправильно выразился). Уже давно в стиле энтити не думаю — излишество.

    Ответить на этот комментарий
  6. Дмитрик (1 комментарий)

    Большую часть значений не разу не встречал, использую три и мне хватает.

    Ответить на этот комментарий
  7. NEXU5 (1 комментарий)

    display:none самый нужный)

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.