Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Свойство display (CSS) определяет тип отображения (display type) элемента, имеющий два основных свойства, определяющих генерацию боксов — внешний тип отображения определяет расположение бокса в схеме потока (flow layout) и внутренний тип отображения определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).

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

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

Начальное значениеinline
Применяется квсе элементы
Наследуетсянет
Отображениевсё
Обработка значениякак указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного.
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Свойство display задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:

<display-outside>
Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.
<display-inside>
Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).
<display-listitem>
Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.
<display-internal>
Некоторые модели разметки, такие как table и ruby, имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.
<display-box>
Эти значения определяют, генерирует ли элемент отображение боксов вообще.
<display-legacy>
В CSS 2 используется синтаксис с одним ключевым словом для свойства display, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.
<display-xul> Устарело Gecko 62
Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

"Наследственные" значения отображения

Спецификация уровня 3 подразумевает два значения для свойства display — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

.container {
    display: inline flex;
}

В настоящее время это можно задать с помощью одного значения.

.container {
    display: inline-flex;
}

Формальный синтаксис

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

где
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

Примеры

В разделе Syntax содержатся несколько примеров для разных типов значений display, которые это свойство может принимать.

Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений display в других статьях на MDN:

Доступность

display: none;

Если свойство display принимает значение none на элементе,  то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.

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

display: contents;

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

Таблицы

Если у элемента <table> изменить значение свойства display на block, grid или flex, это изменит его представление в  дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

Спецификации

Спецификация Статус Комментарий
CSS Display Module Level 3
Определение 'display' в этой спецификации.
Рабочий черновик Добавлены run-in, flow, flow-root, contents и multi-keyword значения.
CSS Ruby Layout Module Level 1
Определение 'display' в этой спецификации.
Рабочий черновик Добавлены ruby, ruby-base, ruby-text, ruby-base-container и ruby-text-container.
CSS Grid Layout
Определение 'display' в этой спецификации.
Кандидат в рекомендации Добавлены значения модели grid бокс.
CSS Flexible Box Layout Module
Определение 'display' в этой спецификации.
Кандидат в рекомендации Добавлены значения модели flexible бокс.
CSS Level 2 (Revision 1)
Определение 'display' в этой спецификации.
Рекомендация Добавлены значения модели table и inline-block.
CSS Level 1
Определение 'display' в этой спецификации.
Рекомендация Начальное определение. Базовые значения: none, block, inline и list-item.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
Multi-keyword values
Экспериментальная
Chrome ? Edge ? Firefox Нет поддержки НетIE Нет поддержки НетOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Нет поддержки НетOpera Android ? Safari iOS ? Samsung Internet Android ?
list-itemChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 6Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
inline-blockChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 8
Полная поддержка 8
Частичная поддержка 6
Замечания
Замечания Until Internet Explorer 8, inline-block is only for natural inline elements.
Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
inline-tableChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3IE Полная поддержка 8Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-groupChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 8Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
flexChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Firefox 28 added multi-line flexbox support.
Нет поддержки 18 — 28
Отключено
Отключено From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11
Полная поддержка 11
Полная поддержка 8
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -ms-flexbox
Opera Полная поддержка 16
Полная поддержка 16
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 15
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Firefox 28 added multi-line flexbox support.
Нет поддержки 18 — 28
Отключено
Отключено From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 14
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 7.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка Да
inline-flexChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Firefox 28 added multi-line flexbox support.
Нет поддержки 18 — ?
Отключено
Отключено From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 11
Полная поддержка 11
Полная поддержка 8
Альтернативное имя
Альтернативное имя Использует нестандартное имя: -ms-inline-flexbox
Opera Полная поддержка 16
Полная поддержка 16
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 20
Замечания
Полная поддержка 20
Замечания
Замечания Firefox 28 added multi-line flexbox support.
Нет поддержки 18 — ?
Отключено
Отключено From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка Да
grid
Экспериментальная
Chrome Полная поддержка 57Edge Полная поддержка 16
Полная поддержка 16
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Полная поддержка 52IE Частичная поддержка 10
С префиксом Замечания
Частичная поддержка 10
С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Internet Explorer implements an older version of the specification.
Opera Полная поддержка 44Safari Полная поддержка ДаWebView Android Полная поддержка 57Chrome Android Полная поддержка 57Edge Mobile Полная поддержка 16
Полная поддержка 16
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Android Полная поддержка 52Opera Android Полная поддержка 44Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 7.0
inline-grid
Экспериментальная
Chrome Полная поддержка 57Edge Полная поддержка 16
Полная поддержка 16
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Полная поддержка 52IE Частичная поддержка 10
С префиксом Замечания
Частичная поддержка 10
С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Internet Explorer implements an older version of the specification.
Opera Полная поддержка 44Safari ? WebView Android Полная поддержка 57Chrome Android Полная поддержка 57Edge Mobile Полная поддержка 16
Полная поддержка 16
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -ms-
Firefox Android Полная поддержка 52Opera Android Полная поддержка 44Safari iOS ? Samsung Internet Android Полная поддержка 7.0
subgrid
Устаревшая
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки НетIE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container
Экспериментальная
Chrome ? Edge Полная поддержка 12Firefox Полная поддержка 38
Полная поддержка 38
Нет поддержки 34 — 38
Отключено
Отключено From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 38
Полная поддержка 38
Нет поддержки 34 — 38
Отключено
Отключено From version 34 until version 38 (exclusive): this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
run-in
Экспериментальная
Chrome Нет поддержки 1 — 32
Замечания
Нет поддержки 1 — 32
Замечания
Замечания Before Chrome 4, run-in was not supported before inline elements.
Edge Нет поддержки НетFirefox Нет поддержки НетIE Полная поддержка 8Opera Нет поддержки 7 — 15Safari Нет поддержки 1 — 8
Замечания
Нет поддержки 1 — 8
Замечания
Замечания Before Safari 5, run-in was not supported before inline elements.
WebView Android Нет поддержки ? — 4.4.3
Замечания
Нет поддержки ? — 4.4.3
Замечания
Замечания Before version 4, run-in was not supported before inline elements.
Chrome Android Нет поддержки ? — 32
Замечания
Нет поддержки ? — 32
Замечания
Замечания Before Chrome 4, run-in was not supported before inline elements.
Edge Mobile Нет поддержки НетFirefox Android Нет поддержки НетOpera Android ? Safari iOS Нет поддержки ? — 8
Замечания
Нет поддержки ? — 8
Замечания
Замечания Before Safari 5, run-in was not supported before inline elements.
Samsung Internet Android ?
flow-root
Экспериментальная
Chrome Полная поддержка 58Edge ? Firefox Полная поддержка 53IE ? Opera Полная поддержка 45Safari ? WebView Android Полная поддержка 58Chrome Android Полная поддержка 58Edge Mobile ? Firefox Android Полная поддержка 53Opera Android Полная поддержка 45Safari iOS ? Samsung Internet Android Полная поддержка 7.0
contents
Экспериментальная
Chrome Полная поддержка 65
Полная поддержка 65
Нет поддержки 58 — 65
Отключено
Отключено From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Нет поддержки НетFirefox Полная поддержка 37
Полная поддержка 37
Нет поддержки 36 — 53
Отключено
Отключено From version 36 until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 52Safari Полная поддержка 11.1WebView Android Полная поддержка 65Chrome Android Полная поддержка 65Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 57Opera Android Полная поддержка 52Safari iOS Полная поддержка 11.1Samsung Internet Android Нет поддержки Нет
contents: Specific behavior of unusual elements when display: contents is applied to them
Экспериментальная
Chrome ? Edge Нет поддержки НетFirefox Полная поддержка 59IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android ? Chrome Android ? Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 59Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android ?
-moz-box and -moz-inline-box
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Scheduled for removal (See bug 879275).
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Scheduled for removal (See bug 879275).
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
-moz-grid, -moz-inline-grid, -moz-grid-group and -moz-grid-line
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки ? — 62IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки ? — 62Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
-moz-stack and -moz-inline-stack
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки ? — 62IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки ? — 62Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
-moz-deck
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки ? — 62IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки ? — 62Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
-moz-popup
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки ? — 62IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Нет поддержки ? — 62Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Использует нестандартное имя.
Использует нестандартное имя.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: bsergey, warsan, baradusov, Sebastianz, Aleksej, teoli, racer1933
Обновлялась последний раз: bsergey,