Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block , inline , list-item и none . Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
Табл. 1. Поддержка браузерами значений display
Значение
Описание
IE6
IE7
IE8
Cr2
Cr8
Op9.2
Op10
Sa3.1
Sa5
Fx3
Fx4
block
Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как встроенный. Использование блочных тегов, таких как и
, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table
Определяет, что элемент является таблицей как при использовании тега
, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item
Элемент выводится как блочный и добавляется маркер списка.
none
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in
Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table
Определяет, что элемент является блочной таблицей подобно использованию тега
.
table-caption
Задает заголовок таблицы подобно применению тега .
table-cell
Указывает, что элемент представляет собой ячейку таблицы (тег
или
).
table-column
Назначает элемент колонкой таблицы, словно был добавлен тег .
table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега .
table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега .
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега .
table-row
Элемент отображается как строка таблицы (тег
).
table-row-group
Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега .
поддержка значений table-footer-group и table-header-group происходит только для тегов и ;
для элементов
понимает значение block как list-item ;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
значение table-column применяется только для тега ;
значение table-column-group поддерживается только для тега .
Chrome 2.0, а также Safari версии 3 и старше, iOS:
значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline .
Значение table-cell не работает, если нет элементов со значениями свойства display : table и table-row .
Мы уже видели, что есть в основном два типа элементов HTML: блочные и строчные элементы. Мы также упомянули несколько альтернативных, вроде list-item или table-cell .
Свойство display позволяет изменять тип элемента HTML. По умолчанию для абзаца (блочный элемент) значение display будет block , но может отображаться как inline :
Почему бы не использовать строчные элементы, такие как ?
Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.
Короче говоря, display позволяет сменить тип элемента без изменения его смысла.
Для каждого варианта display есть определённое поведение:
block будет занимать всю доступную ширину;
inline будет действовать как обычный текст;
inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
list-item похож на block , так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
у table , table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.
display: block
Превратит любой элемент в блочный.
Этот метод часто используется для ссылок, чтобы увеличить зону их щелчка, которую можно легко оценить, задав цвет фона.
Если превратить эти ссылки в блочные, мы увеличим их область:
display: inline
Превращает любой элемент в строчный, как если бы он был только простым текстом.
Часто используется для создания горизонтальной навигации, где семантически, но не визуально полезны пункты списка.
display: list-item
) или с порядковым номером (в упорядоченном списке ).
display: none
Применение display: none к элементу HTML удаляет его из веб-страницы, как если бы он никогда не существовал в вашем коде.
Здесь в коде три абзаца, но видны только два, как будто второго человека никогда не существовало.
visibility: hidden
Свойство visibility немного похоже на display . Применение visibility: hidden скрывает элемент со страницы, но только делает его невидимым: он по-прежнему занимает место, где только что был.
So far away from me
You're so far away.
Здесь в коде пять абзацев, но появляются только два, при этом пространство, которое занимали скрытые абзацы, остаётся, но абзацы видеть вы не можете.
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Невидимый div (
Я - невидим!
) Стоит внутри скобок
Значение block
Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display многие элементы имеют по умолчанию: , заголовок , параграф
.
Блоки прилегают друг к другу вплотную, если у них нет margin .
Значение inline
Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: , .
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Во всём остальном – это блок, то есть:
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
div
Элемент С неизвестной Высотой
CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.
При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .
Значения list-item, run-in и flex
У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .
Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .
Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module
