CSS-свойство display

CSS-свойство display указывает тип элемента. Каждый тип устанавливает некие правила для взаимодействия с другими элементами и своего содержимого.

Значение по умолчанию:	`inline`
Применяется к:	Все элементы
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	CSS 1, 2, 3

Если значение display не указано явно, для абсолютно-позиционированных и floated элементов оно вычисляется самостоятельно.
Если для свойства display установлено значение none — элемент вообще не создает никаких блоков и не влияет на макет; элемент и его содержимое полностью удаляются из структуры и документ отображается так, будто бы элемент никогда не существовал в дереве документа.

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit

Примеры написания кода свойства display:

div {
    display: inline;
}
span {
    display: block;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`inline`	Устанавливает свойства строчного элемента.
`block`	The element generates a блочного элемента.
`contents`	Для самого элемента не устанавливается специфических свойств, но для потомков и псевдо-элементы устанавливаются поля (boxes) и текст работает как обычно.
`flex`	Устанавливает свойства flex-содержимого для элемента.
`flow`	Элемент устанавливает свое содержимое, используя макет потока (линейно-блочный макет).
`flow-root`	Элемент генерирует блок-контейнер box, и выкладывает его содержимое, используя макет потока.
`grid`	Устанавливает свойства grid-сетки для элемента.
`inline-block`	Устанавливает свойства блочного элемента, который обтекается другими элементами подобно встроенному элементу.
`inline-flex`	Устанавливает свойства flex-содержимого для элемента, но он обтекается другими элементами подобно встроенному элементу.
`inline-grid`	Устанавливает свойства grid-сетки для элемента, но он обтекается другими элементами подобно встроенному элементу.
`inline-table`	Устанавливает свойства тега table для элемента, но он обтекается другими элементами подобно встроенному элементу.
`list-item`	Устанавливает свойства блочного элемента и добавляется маркер списка.
`run-in`	Элемент ведет себя как блочный или строчный в зависимости от контекста.
`table`	Элемент ведет себя как `<table>`
`table-caption`	Элемент ведет себя как `<caption>`
`table-column-group`	Элемент ведет себя как`<colgroup>`
`table-header-group`	Элемент ведет себя как `<thead>`
`table-footer-group`	Элемент ведет себя как `<tfoot>`
`table-row-group`	Элемент ведет себя как `<tbody>`
`table-cell`	Элемент ведет себя как `<td>`
`table-column`	Элемент ведет себя как `<col>`
`table-row`	Элемент ведет себя как `<tr>`
`none`	Отключить отображение элемента. У всех дочерних элементов также отключено отображение, даже если их свойство `display` установлено не `none`.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `display`.

Поддержка браузеров

Свойство display поддерживается во всех основных браузерах.

Такие значения, как contents, flow-root, run-in и т. д., плохо поддерживаются в большинстве браузеров. Вы должны стараться избегать их использования в настоящее время.
Вообще, список возможных значений этого свойства которые поддерживаются всем браузерами очень короткий — block, inline, list-item и none. Все остальные значения поддерживаются браузерами выборочно.