Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — 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 .
Как отобразить элемент на странице. Свойство display
Свойство display определяет тип отображения элемента, как он будет отображаться на веб-странице: как блок, строчный элемент или каким-то другим способом.
Значения свойства display
Теперь разберём на примерах значения свойства display .
block — элемент отображается как блок и занимает всю доступную ширину. Новый блок начинается с новой строки. Примером элемента, который имеет значение display: block , может быть div .
Заголовок блока
Текст внутри блока
inline — элемент отображается как строчный элемент и не создаёт новый блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого. Примером элемента, который имеет значение display: inline , может быть span .
Этот текст выделенный текст и еще немного текста
Этот текст выделенный текст и еще немного текста
inline-block — элемент отображается как строчный элемент, но его содержимое может быть отформатировано как блок. Элемент занимает столько места, сколько ему нужно для отображения содержимого, но может иметь ширину и высоту. Примером элемента, который имеет значение display: inline-block , может быть button .
Этот текст находится на той же строке, что и
этот текст
none — элемент не отображается на веб-странице и его содержимое не занимает места. Это может быть полезно для скрытия элементов на странице или для создания анимаций. Примером элемента, который имеет значение display: none , может быть script .
Пример использования свойства display с разными значениями.
Этот блочный элемент занимает всю ширину.
Этот строчный элемент занимает только столько места, сколько ему нужно.
Этот элемент имеет значение none, поэтому он не отображается на веб-странице.
Блочный элемент имеет жёлтый фон, строчный элемент — розовый фон, элемент button — голубой фон и имеет ширину и высоту, а скрытый элемент не отображается на странице.
Наследуется ли свойство display
Свойство display является не наследуемым, что означает, что тип отображения элемента не будет наследоваться его потомками. Тип отображения элемента должен быть указан явно для каждого элемента на странице.
Например, если родительский элемент имеет свойство display: block; , а его дочерний элемент не имеет заданного свойства display , то тип отображения дочернего элемента будет определён по умолчанию, который может отличаться в зависимости от типа элемента.
Однако, если вы зададите свойство display для дочернего элемента, то оно переопределит наследованное значение и будет применяться только к этому элементу.
Это абзац, наследующий свойства родительского элемента
Это абзац с явно заданным типом отображения
Здесь родительский элемент имеет свойство display: block; , но дочерний элемент .child имеет свойство display: inline; . Поэтому абзац, находящийся в дочернем элементе, будет отображаться как инлайновый элемент, несмотря на то, что родительский элемент имеет тип отображения блочного элемента.
Нюансы использования
Как и любое CSS-свойство, display имеет нюансы и особенности, которые важно учитывать при создании веб-страниц.
display определяет, как элемент будет взаимодействовать с другими элементами на странице. Например, элементы с типом block занимают всю доступную ширину и начинаются с новой строки, что может повлиять на позиционирование других элементов на странице.
Некоторые элементы имеют собственные значения по умолчанию для свойства display . Например, div имеет значение по умолчанию display: block , а span имеет значение display: inline . Поэтому, если вы хотите изменить значение display для этих элементов, необходимо указать это в CSS.
При использовании значения display: inline-block нужно учитывать, что между элементами может появиться небольшой пробел, который вызван пробелом в HTML-коде. Этот нюанс можно устранить разными способами, например, удалением пробелов в коде или применением стилей, которые устраняют эффект.
⭐ Поддержка браузерами свойства display
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
