CSS-свойство `display`

Свойство display CSS определяет, считается ли элемент блочным или строчным блоком, а также задаёт способ размещения его дочерних элементов, например потоковую раскладку, сетку или flex.

Формально свойство display задаёт внутренний и внешний типы отображения элемента. Внешний тип определяет участие элемента в потоковой раскладке; внутренний тип задаёт раскладку дочерних элементов. Некоторые значения display полностью описаны в отдельных спецификациях; например, подробное описание того, что происходит при объявлении display: flex, содержится в спецификации CSS Flexible Box Model.

Попробуйте

display: block;

display: inline flow-root;

display: none;

display: flex;

display: grid;

<p>
  Apply different <code>display</code> values on the dashed orange-bordered
  <code>div</code>, which contains three child elements.
</p>
<section class="default-example" id="default-example">
  <div class="example-container">
    Some text A.
    <div id="example-element">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
      <div class="child">Child 3</div>
    </div>
    Some text B.
  </div>
</section>

.example-container {
  width: 100%;
  height: 100%;
}

code {
  background: #88888888;
}

#example-element {
  border: 3px dashed orange;
}

.child {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #ccccff;
  border: 1px solid #ababab;
  color: black;
}

Синтаксис

/* short display */
display: none;
display: contents;
display: block;
display: flow-root;
display: inline;
display: inline-block;
display: list-item;
display: inline list-item;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: grid-lanes;
display: inline-grid-lanes;
display: table;
display: inline-table;

/* full display */
display: block flow;
display: block flow-root;
display: inline flow;
display: inline flow-root;
display: block flow list-item;
display: inline flow list-item;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block table;
display: inline table;

/* global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Для свойства CSS display используются ключевые слова.

Группы значений

Ключевые слова можно разделить на шесть групп значений.

Внешний тип

<display-outside>

Эти ключевые слова задают внешний тип отображения элемента, то есть его роль в потоковой раскладке:

block

Элемент создаёт блочный блок, перед которым и после которого в обычном потоке создаются разрывы строк.

inline

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

.container {
  display: inline-flex;
  display: inline flex;
}

Внутренний тип

<display-inside>

Эти ключевые слова задают внутренний тип отображения элемента, который определяет тип контекста форматирования для размещения его содержимого (если элемент не является замещаемым). Если одно из этих ключевых слов используется само по себе как единственное значение, внешний тип отображения элемента по умолчанию будет block (за исключением ruby, для которого значением по умолчанию будет inline).

flow

Элемент размещает содержимое с помощью потоковой раскладки (блочной и строчной раскладки).

Если его внешний тип отображения — inline и он участвует в блочном или строчном контексте форматирования, элемент создаёт строчный блок. В противном случае он создаёт блочный блок.

В зависимости от значения других свойств (например, position, float или overflow), а также от того, участвует ли сам элемент в блочном или строчном контексте форматирования, он либо создаёт новый блочный контекст форматирования (BFC) для своего содержимого, либо включает содержимое в родительский контекст форматирования.

flow-root

Элемент создаёт блочный блок, который формирует новый блочный контекст форматирования, определяя расположение корня форматирования.

table

Эти элементы ведут себя как элементы HTML <table>. Они определяют блочный блок.

flex

Элемент ведёт себя как блочный элемент и размещает содержимое в соответствии с моделью flexbox.

grid

Элемент ведёт себя как блочный элемент и размещает содержимое в соответствии с моделью сетки.

grid-lanes

Элемент ведёт себя как блочный элемент и размещает содержимое с помощью раскладки по дорожкам сетки. Столбцы задаются свойством grid-template-columns и ведут себя как в обычной сетке, а элементы упаковываются в блочном направлении, чтобы заполнить промежутки между элементами разного размера. Подробнее см. в статье Раскладка по дорожкам сетки.

inline-grid-lanes

Элемент ведёт себя как строчный элемент и размещает содержимое с помощью раскладки по дорожкам сетки. Строки задаются свойством grid-template-rows и ведут себя как в обычной сетке, а элементы упаковываются в строчном направлении, чтобы заполнить промежутки между элементами разного размера. Подробнее см. в статье Раскладка по дорожкам сетки.

ruby

Элемент ведёт себя как строчный элемент и размещает содержимое в соответствии с моделью форматирования ruby. Он ведёт себя как соответствующие элементы HTML <ruby>.

Элемент списка

<display-listitem>

Элемент создаёт блочный блок для содержимого и отдельный строчный блок элемента списка.

Единственное значение list-item заставляет элемент вести себя как элемент списка. Его можно использовать вместе со свойствами list-style-type и list-style-position.

Значение list-item также можно сочетать с любым ключевым словом <display-outside> и ключевым словом flow или flow-root из группы <display-inside>.

Внутренние значения

<display-internal>

Некоторые модели раскладки, например table и ruby, имеют сложную внутреннюю структуру с несколькими ролями, которые могут выполнять их дочерние элементы и потомки. В этом разделе описаны такие «внутренние» значения display, имеющие смысл только в рамках соответствующего режима раскладки.

table-row-group

Эти элементы ведут себя как элементы HTML <tbody>.

table-header-group

Эти элементы ведут себя как элементы HTML <thead>.

table-footer-group

Эти элементы ведут себя как элементы HTML <tfoot>.

table-row

Эти элементы ведут себя как элементы HTML <tr>.

table-cell

Эти элементы ведут себя как элементы HTML <td>.

table-column-group

Эти элементы ведут себя как элементы HTML <colgroup>.

table-column

Эти элементы ведут себя как элементы HTML <col>.

table-caption

Эти элементы ведут себя как элементы HTML <caption>.

ruby-base

Эти элементы ведут себя как элементы HTML <rb>.

ruby-text

Эти элементы ведут себя как элементы HTML <rt>.

ruby-base-container

Эти элементы создаются как анонимные блоки.

ruby-text-container

Эти элементы ведут себя как элементы HTML <rtc>.

Блок

<display-box>

Эти значения определяют, создаёт ли элемент блоки отображения.

contents

Эти элементы сами по себе не создают отдельный блок. Их заменяют псевдоблок и дочерние блоки. Обратите внимание: спецификация CSS Display Level 3 определяет, как значение contents должно влиять на «необычные элементы» — элементы, которые отображаются не только с помощью концепций CSS-блоков, например замещаемые элементы. Подробнее см. в Приложении B: влияние display: contents на необычные элементы.

none

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

Составные значения

<display-legacy>

В CSS 2 для свойства display использовался составной синтаксис с одним ключевым словом, требовавший отдельных ключевых слов для блочного и строчного вариантов одного режима раскладки.

inline-block

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

Эквивалент: inline flow-root.

inline-table

Значение inline-table не имеет прямого соответствия в HTML. Оно ведёт себя как элемент HTML <table>, но как строчный блок, а не блочный. Внутри блока таблицы находится блочный контекст.

Эквивалент: inline table.

inline-flex

Элемент ведёт себя как строчный элемент и размещает содержимое в соответствии с моделью flexbox.

Эквивалент: inline flex.

inline-grid

Элемент ведёт себя как строчный элемент и размещает содержимое в соответствии с моделью сетки.

Эквивалент: inline grid.

Какой синтаксис использовать?

Модуль CSS display описывает многоключевой синтаксис для значений свойства display, с помощью которого можно явно задать внешний и внутренний типы отображения. Одноключевые значения (составные значения <display-legacy>) поддерживаются для обратной совместимости.

Например, с помощью двух значений можно задать строчный flex-контейнер следующим образом:

.container {
  display: inline flex;
}

То же самое можно указать с помощью устаревшего одноключевого значения:

.container {
  display: inline-flex;
}

Подробнее об этих изменениях см. в руководстве Использование многоключевого синтаксиса со свойством CSS display.

Описание

На отдельных страницах, посвящённых различным типам значений свойства display, приведено несколько примеров их использования — см. раздел Синтаксис. Кроме того, следующие материалы подробно рассматривают различные значения display.

Многоключевые значения

• Использование многоключевого синтаксиса со свойством CSS display

Потоковая раскладка CSS (display: block, display: inline)

• Блочная и строчная раскладка в обычном потоке
• Потоковая раскладка и переполнение
• Потоковая раскладка и режимы письма
• Введение в контексты форматирования
• В потоке и вне потока

display: flex

• Основные понятия flexbox
• Выравнивание элементов во flex-контейнере
• Управление пропорциями flex-элементов вдоль главной оси
• Подробно о переносе flex-элементов
• Упорядочивание flex-элементов
• Связь flexbox с другими способами раскладки
• Типичные сценарии использования flexbox

display: grid

• Основные понятия раскладки сетки
• Связь с другими способами раскладки
• Размещение по линиям
• Области шаблона сетки
• Раскладка с именованными линиями сетки
• Автоматическое размещение в сетке
• Выравнивание элементов в раскладке CSS Grid
• Сетки, логические значения и режимы письма
• Раскладка CSS Grid и доступность
• Реализация типичных макетов с помощью сеток
• Раскладка по дорожкам сетки

Анимация display

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

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

• При анимации display от none до block (или другого видимого значения display) значение переключится на block в момент 0% длительности анимации, поэтому содержимое будет видно всё это время.
• При анимации display от block (или другого видимого значения display) до none значение переключится на none в момент 100% длительности анимации, поэтому содержимое будет видно всё это время.

Такое поведение полезно для создания анимаций появления и исчезновения, например когда нужно удалить контейнер из DOM с помощью display: none, но при этом дать ему плавно исчезнуть посредством opacity, а не скрывать его сразу.

При анимации display с помощью CSS-анимаций начальное значение display нужно задать в явном ключевом кадре (например, с помощью 0% или from). Пример см. в статье Использование CSS-анимаций.

Для анимации display с помощью CSS-переходов требуются две дополнительные возможности:

• @starting-style задаёт начальные значения свойств, от которых запускается переход при первом отображении анимируемого элемента. Это необходимо, чтобы избежать неожиданного поведения. По умолчанию CSS-переходы не запускаются при первом обновлении стилей элемента или при изменении типа display с none на другой тип.
• transition-behavior: allow-discrete нужно указать в объявлении transition-property (или в сокращённом свойстве transition), чтобы включить переходы display.

Примеры переходов для свойства display см. на страницах @starting-style и transition-behavior.

Доступность

display: none

Использование значения none свойства display удаляет элемент из дерева доступности. В результате программы экранного доступа перестанут объявлять этот элемент и все его дочерние элементы.

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

Хотя display: none скрывает содержимое от дерева доступности, скрытые элементы, на которые ссылаются атрибуты aria-describedby или aria-labelledby видимых элементов, остаются доступны вспомогательным технологиям.

display: contents

В некоторых браузерах текущие реализации удаляют из дерева доступности любой элемент со значением contents свойства display (но его потомки остаются в дереве). В результате программы экранного доступа перестают объявлять сам элемент. Согласно спецификации CSS, такое поведение неверно.

• [Более доступная разметка с display: contents

  Хидде де Врис](https://hidde.blog/more-accessible-markup-with-display-contents/)

• [Display: Contents — это не сброс CSS

  Эдриан Росселли](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)

Таблицы

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

• [Скрытый контент для повышения доступности

  Go Make Things](https://gomakethings.com/articles/hidden-content-for-better-a11y/)

• Пояснения MDN к рекомендациям WCAG, пункт 1.3

• [Понимание критерия успеха 1.3.1

  Руководство W3C по WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)

Формальное определение

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

display = 
  [ <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

Примеры

Сравнение значений display

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

Для контейнеров и их дочерних элементов заданы свойства padding и background-color, чтобы было проще увидеть влияние значений display.

HTML

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>block flow</option>
    <option>inline</option>
    <option>inline flow</option>
    <option>flow</option>
    <option>flow-root</option>
    <option>block flow-root</option>
    <option>table</option>
    <option>block table</option>
    <option>flex</option>
    <option>block flex</option>
    <option>grid</option>
    <option>block grid</option>
    <option>list-item</option>
    <option>block flow list-item</option>
    <option>inline flow list-item</option>
    <option>block flow-root list-item</option>
    <option>inline flow-root list-item</option>
    <option>contents</option>
    <option>none</option>
    <option>inline-block</option>
    <option>inline flow-root</option>
    <option>inline-table</option>
    <option>inline table</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>inline-grid</option>
    <option>inline grid</option>
  </select>
</div>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

JavaScript

const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();

Результат

Обратите внимание: некоторые многоключевые значения добавлены для наглядности и эквивалентны следующим значениям:

• block = block flow
• inline = inline flow
• flow = block flow
• flow-root = block flow-root
• table = block table
• flex = block flex
• grid = block grid
• list-item = block flow list-item
• inline-block = inline flow-root
• inline-table = inline table
• inline-flex = inline flex
• inline-grid = inline grid

Дополнительные примеры для каждого типа display приведены в разделе Группы значений.

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

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

См. также

• visibility, float, position
• grid, flex
• Компоновка руби CSS module
• SVG display attribute
• Блочная и строчная компоновка в нормальном потоке
• Введение в контексты форматирования
• Компоновка дорожек сетки