display

Пример

Карточки встают в ряд, если сделать их общего родителя флекс-контейнером:

<ul class="cards">
  <li>Первая</li>
  <li>Вторая</li>
  <li>Третья</li>
</ul>

.cards {
  display: flex;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.cards li {
  flex: 1;
  padding: 1rem;
  border: 1px solid;
}

Синтаксис

display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | grid-lanes | inline-grid-lanes | <display-outside> || [ <display-inside> | math ];

Начальное значение

inline

Применяется к

всем элементам

Наследуется

нет

Анимируется

дискретно; плавный переход — с transition-behavior: allow-discrete

Вычисляемое значение

пара ключевых слов внешнего и внутреннего типа (с list-item) либо одно ключевое слово

Значение можно записать одним ключевым словом (flex) или парой «внешний тип + внутренний тип» (block flex). Обе записи равнозначны.

Значения

block

Блочный элемент: начинается с новой строки и занимает всю доступную ширину. Так ведут себя div, p, заголовки.

inline

Строчный элемент: встаёт в строку текста, ширина и высота из CSS на него не действуют. Значение по умолчанию.

inline-block

Встаёт в строку, как inline, но внутри ведёт себя как блок: у него работают ширина, высота и вертикальные отступы.

flex и inline-flex

Флекс-контейнер: потомки раскладываются вдоль одной оси — в строку или в столбец.

grid и inline-grid

Грид-контейнер: потомки раскладываются по сетке из строк и колонок.

flow-root

Блок, который создаёт новый контекст форматирования: содержит плавающие элементы и не даёт отступам потомков «выпадать» наружу.

list-item

Блок с маркером, как у li.

contents

Блок самого элемента исчезает, а его потомки встают на его место в раскладке родителя.

none

Элемент не отображается и не занимает места.

Есть и табличные значения (table, table-row, table-cell и другие) — они повторяют поведение элементов таблицы.

Как понять

У любого блока два типа. Внешний отвечает за то, как блок ведёт себя среди соседей: начинает новую строку (block) или встаёт в строку текста (inline). Внутренний — за то, как он раскладывает своих детей: обычным потоком (flow), флексом (flex) или сеткой (grid).

Отсюда краткие записи: flex — это block flex, inline-grid — inline grid, а inline-block — inline flow-root. Когда вы пишете display: flex, вы меняете внутренний тип: сам элемент по-прежнему блочный, а его дети становятся флекс-элементами.

Примеры

Меню в строку

Пункты списка по умолчанию блочные и стоят столбиком. inline-block ставит их в строку и при этом позволяет задать отступы:

<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

.menu {
  padding: 0;
  list-style: none;
}

.menu li {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid;
}

Строчный флекс-контейнер

Кнопка с иконкой остаётся в строке текста, а иконку и подпись выравнивает флекс:

<p>
  Нажмите <button class="button" type="button"><span>★</span> В избранное</button>, чтобы сохранить.
</p>

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

Обёртка, которая не мешает сетке

display: contents убирает блок обёртки, и её дети становятся элементами сетки родителя:

<div class="grid">
  <div>1</div>
  <div class="group">
    <div>2</div>
    <div>3</div>
  </div>
  <div>4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.grid div:not(.group) {
  padding: 0.5rem;
  border: 1px solid;
}

.group {
  display: contents;
}

Подсказки

• display: none убирает элемент и для программ экранного доступа. Чтобы спрятать только визуально, нужен другой приём — например, класс visually-hidden.
• Атрибут hidden работает через display: none из стилей браузера. Если в вашем CSS у элемента есть display: flex, атрибут перестанет прятать его — добавьте правило [hidden] { display: none; }.
• display: contents у кнопок, ссылок и других интерактивных элементов в старых версиях браузеров выкидывал их из дерева доступности. Не применяйте его к элементам, у которых есть своя роль.
• Ширина и высота у inline-элемента не работают. Если нужно задать размер, используйте inline-block или inline-flex.