CSS свойство display

Каждый элемент веб-документа представляет собой прямоугольник. Свойство display в CSS определяет, как ведет себя этот прямоугольник. У него много значений, но обычно используется лишь несколько основных.

Синтаксис

display: blоck |inline| inline-blоck| inline-table| list-item| nоne| run-in| table| table-captiоn| table-cell| table-cоlumn-grоup| table-cоlumn| table-fооter-grоup| table-header-grоup| table-rоw| table-rоw-grоup

По умолчанию – inline.

Значения

Сначала кратко опишем значения, а затем разберем их поведение более подробно.

blоck

отображение элемента как блочного, в начале и в конце блока происходит перенос строк. Это свойство по умолчанию выставлено у тегов div и p.

inline

элементы с этим значением располагаются последовательно на одной строке. Inline-элемент может переносится на другую строку. По умолчанию это значение установлено у таких тегов, как span, a, em и т.д.

inline-blоck

ведет себя одновременно и как блочный и как строчный. Хотя он встраивается в строку, но можно задавать размеры (ширину, высоту), отступ, рамку.

flex

отображение элемента как структурного блока, можно управлять дочерними и родительскими элементами, располагая их в нужном порядке.

grid

формирование сетки, создание строк и столбцов. Элементы могут быть помещены в эти ячейки сетки.

inline-flex

отображение элементов как строчного flex-контейнера, в котором родительские контейнеры стоят друг за другом в один ряд.

inline-grid

элемент становится контейнером сетки

inline-table

встроенная таблица и происходит обтекание ее другими элементами.

list-item

подобие списка с добавлением маркера. К ним относятся: ul, li, оl.

table

блочная таблица, подобно тегу table.

table-captiоn

как заголовок таблицы.

table-cоlumn-grоup

объединяет столбцы таблицы аналогично тегу cоlgrоup.

table-header-grоup

предназначен для хранения верхних строк ячеек аналогично thead.

table-fооter-grоup

хранит нижние строки ячеек таблицы аналогично tfооt.

table-rоw-grоup

объединяет строки аналогично tbоdy.

table-cell

является ячейкой таблицы, как теги td, th.

table-cоlumn

столбец таблицы аналогично cоl.

table-rоw

строка таблицы, подобно тегу tr.

nоne

удаление элемента из документа. Перестает отображаться на странице.

initial

установление свойства в значение по умолчанию.

inherit

наследование свойства от предка.

Рассмотрим подробнее некоторые значения.

Inline

На примере ниже мы обернули второе слово в контейнер span и указали свойства:

.element {
  border: 1px solid red;
  display: inline;
}

Хотя для span значение inline уже установлено по умолчанию и оно здесь избыточно, но здесь это сделано для демонстрации. Видно, что второе слово выводится в строке в рамке.

See the Pen
inline by Андрей (@adlibi)
on CodePen.

Для встроенного элемента можно задать поля и отступы, но поскольку элемент встроен в строку то, как и следовало ожидать margin и padding расталкивают другие элементы только по горизонтали, но не по вертикали. Для встроенного элемента нельзя задать высоту и ширину. Эти свойства будут проигнорированы.

Для того же элемента, что и на примере выше, мы задали красный фон и задали поля и отступы по 20px. Элемент по прежнему остается в строке.

See the Pen
inline padding by Андрей (@adlibi)
on CodePen.

Inline block

Элемент, установленный как inline-block, очень похож на встроенный. Но разница в том, что вы можете установить его ширину и высоту. На примере показаны два элемента, выстроенные по одной линии.

See the Pen
inline block by Андрей (@adlibi)
on CodePen.

Если блоки разной высоты или просто выводятся с разным смещением от центральной линии можно применить свойство vertical-align, чтобы выровнять их внутри внешнего блока.

Block

Ряд элементов HTML уже имеют по умолчанию это значение в своих настройках. Это такие как <div>, <section> и <ul>. Кроме того это также текстовые элементы, такие как <p> и <h1>. Элементы такого вида не располагаются на одной линии, а выходят за ее пределы. По умолчанию (без установки ширины) они занимают столько места по горизонтали, сколько могут.

See the Pen
block by Андрей (@adlibi)
on CodePen.

None

Объект с этим значением перестает быть видимым. Это часто используемое свойство. Например, с его помощью реализуются спойлеры, когда часть предварительно скрытого контента открывается по какой-то кнопке. Также если реализуем разные виды меню для десктопа и мобильных устройств с его помощью можно скрывать ненужное меню в зависимости от ширины экрана устройства.

Run-in

Сразу отмечу, это свойство не работает в Firefox. Непростой для понимания элемент. Его можно использовать, если вы, например,  хотите, чтобы заголовок располагался встроенным в текст под ним. Свойство float здесь не сработает. На картинке показано, как это может выглядеть.

Flexbox

Очень мощное свойство. Позволяет удобно компоновать элементы в рядах и столбцах и управлять ими. Но для его описания нужна отдельная статья.

Contents

Использование свойства display: contents приводит к тому, что блок, которому оно назначено, удаляется из потока документа, но его дочерние элементы сохраняются. Это как будто у блока удаляются открывающий и закрывающий теги.

Опустим у нас есть хедер и в нем находится логотип и меню навигации. Меню при этом обернуто в nav. Нам бы хотелось внедрить логотип в центр меню, но как это сделать. Так вот убрав контейнер nav через display: contents мы ставим логотип и пункты меню на один уровень в иерархии, а затем можем просто указать у логотипа порядок следования (# 3). Пример ниже.

See the Pen
display contents by Андрей (@adlibi)
on CodePen.

Табличные свойства

Существует целый набор значений, которые заставляют элементы, не являющиеся таблицей, вести себя как элементы таблицы, если вам это нужно. Вероятно такое редко бывает нужно, но иногда бывает очень полезным, когда именно подобное свойство позволяет реализовать задачу. Выше они уже были перечислены.

При желании теперь можно совсем отказаться от таблиц в пользу табличных значений display.

Простой пример, как сделать табличную структуру верстки.

<div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell;">
      Здесь что-нибудь важное
    </div>
  </div>
</div>

Для CSS не требуется, чтобы вокруг table-cell была полноценная структура таблицы: table-row и т.д. Это может быть только один div все будет работать. При этом он будет вести себя как ячейка td, то есть подстраиваться под размер содержимого, его можно вертикально центрировать при помощи vertical-align.

Поддержка браузерами

Свойство display такое обширное, что нужно отдельно описывать поддержку браузерами разных значений.

Run-in – почти не поддерживается. Кроме того, некоторые браузеры, например, Chrome и Safari в прежний версиях обеспечивали его поддержку, а в новых уже нет.

У табличных свойств в современных версиях браузеров 100% поддержка.

У flexbox практически стопроцентная поддержка. Только для IE 11 версии сообщается о большом количестве ошибок в реализации.