display

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* 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>

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

flow

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

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

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

flow-root

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

table

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

flex

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

grid

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

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 имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их потомки и наследники. Этот раздел определяет эти «внутренние» значения отображения, которые имеют смысл только в рамках конкретной модели макета.

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 , представлены многочисленные примеры этих значений в действии — см. раздел Синтаксис. Кроме того, ознакомьтесь со следующими материалами, которые подробно описывают различные значения отображения.

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

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

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

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

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

Существует одно исключение, когда анимация выполняется до или из 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 для элемента удалит его из дерева доступности. Это приведет к тому, что экранная читалка больше не будет объявлять элемент и все его дочерние элементы.

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

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

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

• Более доступная разметка с display: contents | Hidde de Vries
• Display: Contents Is Not a CSS Reset | Adrian Roselli

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

• Краткое замечание о том, как свойства отображения CSS влияют на семантику таблиц — The Paciello Group
• Скрытое содержимое для лучшей доступности | Go Make Things
• MDN Понимание WCAG, объяснения к руководящей линии 1.3
• Понимание критерия успеха 1.3.1 | W3C Понимание WCAG 2.0

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

<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-table  |
  inline-flex   |
  inline-grid   

В этом примере у нас есть два контейнера с блочным отображением, каждый из которых содержит три инлайновых элемента. Ниже этого — выпадающее меню, которое позволяет применять различные значения 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

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

• Блочное и инлайновое форматирование в нормальном потоке
• Введение в контексты форматирования
• visibility, float, position
• grid, flex