display

Властивість CSS display (зображувати) задає те, як обробляється елемент: як блокова чи рядкова рамка, і яке компонування буде застосовано до його нащадків: потокове, сіткове чи гнучке.

Формально кажучи, властивість display встановлює для елемента внутрішній та зовнішній типи відображення. Зовнішній тип визначає участь елемента у потоковому компонуванні; внутрішній тип визначає компонування нащадків. Деякі значення display повністю описані у власних специфікаціях; до прикладу, деталі того, що відбувається при встановленні display: flex визначено у специфікації Гнучкої блокової моделі CSS.

Спробуйте його в дії

Синтаксис

/* складені значення */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* створення блока */
display: none;
display: contents;

/* синтаксис із багатьма значеннями – ключовими словами */
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;

/* інші значення */
display: table;
display: table-row; /* усі табличні елементи мають еквівалентне значення CSS-властивості display */
display: list-item;

/* Глобальні значення */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Властивість CSS display задається за допомогою ключових слів.

Згруповані значення

Ключові значення можуть бути згруповані у шість категорій значень.

Спрямовані назовні

<display-outside>

Ці ключові слова вказують зовнішній тип представлення елемента, що по суті є його роллю у потоковому компонуванні:

block

Елемент утворює блокову рамку, у звичайному потоці додаючи розрив рядка до та після елемента.

inline

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

[!NOTE] Коли браузери, що підтримують синтаксис із кількома значеннями, зустрічають властивість display, що містить лише зовнішнє значення (наприклад, display: block чи display: inline), то внутрішнє значення встановлюється в flow (наприклад, display: block flow чи display: inline flow).

[!NOTE] Щоб мати впевненість, що компонування працює в старіших браузерах, можна скористатися синтаксисом з одним значенням, наприклад, display: inline flex може мати наступний запасний варіант

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

Дивіться більше інформації у статті Використання синтаксису із кількома значеннями у Відображенні CSS.

Спрямовані всередину

<display-inside>

Ці ключові слова вказують внутрішній тип представлення елемента, що визначає тип форматування контексту, в якому його вміст розташовано (припускаючи, що елемент не заміщується):

flow

Елемент розміщує свій вміст за допомогою потокової розкладки (комбінації блокової та рядкової). Якщо його зовнішній тип представлення – inline, і він бере участь у блоковому чи рядковому контексті форматування, то генерує рядкові рамки. Інакше – утворює блокову рамку. Залежно від значень інших властивостей (наприклад, position, float чи overflow) та від того, чи він бере участь у блоковому, чи рядковому контексті форматування, він або створює новий контекст блокового форматування (КБФ) для свого вмісту, або інтегрує свій вміст у батьківський контекст форматування.

flow-root

Елемент породжує блокову рамку, що утворює новий контекст блокового форматування, визначаючи розташування кореня форматування.

table

Такі елементи поводяться неначе HTML-елементи <table>. Вони визначають рамки блокового рівня.

flex

Елемент поводиться як елемент блокового рівня, і розкладає свій вміст згідно з моделлю flexbox.

grid

Елемент поводиться як елемент блокового рівня, і розглядає свій вміст згідно з сітковою моделлю

ruby

Елемент поводиться як елемент рядкового рівня, і розкладає свій вміст згідно з моделлю форматування рубі. Він поводиться як відповідний елемент HTML <ruby>.

[!NOTE] Коли браузери, що підтримують синтаксис із кількома значеннями – ключовими словами, зустрічають властивість display, що містить лише внутрішнє значення (наприклад, display: flex чи display: grid), то зовнішнє значення встановлюється в block (наприклад, display: block flex чи display: block grid).

Пункт списку

<display-listitem>

Елемент генерує блок для вмісту та окремий рядковий блок для пункту списку.

Окреме значення list-item змусить елемент поводити себе як елемент списку. Це можна використовувати разом з властивостями list-style-type і list-style-position.

list-item також може бути скомбінований з будь-яким ключовим значенням <display-outside>, а також із ключовим словом <display-inside> flow або flow-root.

[!NOTE] У браузерах, що підтримують синтаксис із кількома значеннями – ключовими словами, якщо внутрішнє значення не вказане, то воно вважається рівним flow. Якщо не вказане зовнішнє значення, головні рамки елемента матимуть тип зовнішнього представлення block.

Внутрішні

<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, рівень 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-legacy>) підтримуються для забезпечення зворотної сумісності.

Наприклад, використовуючи два значення, можна задати рядковий гнучкий контейнер наступним чином:

.container {
  display: inline flex;
}

Те саме також може бути описано з використанням історичного єдиного значення.

.container {
  display: inline-flex;
}

Більше інформації про ці зміни – в посібнику Використання синтаксису із кількома значеннями у Відображенні CSS.

Глобальні

/* Глобальні значення */
display: inherit;
display: initial;
display: unset;

Опис

Окремі сторінки для різних типів значень, котрі може прийняти властивість display, містять численні приклади цих значень в дії — дивіться розділ Синтаксис. На додачу — перегляньте наступний матеріал, що поглиблено описує різні значення display.

Значення з кількома ключовими словами

• Використання синтаксису із кількома значеннями у Відображенні CSS

Потокове компонування CSS (display: block, display: inline)

• Блокове та рядкове компонування у звичайному потоці
• Потокове компонування та переповнення
• Потокове компонування та режими письма
• Контексти форматування: пояснення
• В потоці та поза потоком

display: flex

• Засади Flexbox
• Шикування елементів у гнучкому контейнері
• Контроль за пропорціями гнучких елементів за основною віссю
• Опанування перенесення гнучких елементів
• Порядок гнучких елементів
• Взаємини Flexbox та інших способів компонування
• Типові випадки використання Flexbox

display: grid

• Засади сіткового компонування
• Взаємини з іншими способами компонування
• Розташування за grid-лініями
• Шаблонні зони в сітках
• Компонування з використанням іменованих grid-ліній
• Автоматичне розташування у сітковому компонуванні
• Шикування блоків у сітковому компонуванні
• Сітки, логічні значення та режими письма
• Сіткове компонування CSS та доступність
• Сіткове компонування CSS та поступове поліпшення підтримки
• Втілення звичних макетів за допомогою сіток

Анімування display

Браузери, що це підтримують, анімують 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-property (або скороченні transition) повинен бути заданий стиль transition-behavior: allow-discrete, щоб увімкнути переходи display.

Приклади переходів за властивістю display дивіться на сторінках @starting-style і transition-behavior.

Доступність

display: none

Використання display значення none на елементі прибере його із дерева доступності. Це призведе до того, що елемент та його нащадки більше не будуть оголошені технологією зчитування з екрана.

Якщо потрібно візуально приховати елемент, більш доступною альтернативою є використання комбінації властивостей для видимого усунення з екрана, але збереження доступності для допоміжних технологій, наприклад, читачів з екрана.

Хоч display: none приховує вміст із дерева доступності, але приховані елементи, на які є посилання з боку видимих елементів через атрибути aria-describedby чи aria-labelledby, доступні для допоміжних технологій.

display: contents

Поточні реалізації у частині браузерів приберуть із дерева доступності будь-який елемент зі значенням contents властивості display (залишивши у дереві його нащадків). Це призведе до того, що сам елемент більше не буде оголошений технологією читання екрана. Це некоректна поведінка згідно зі специфікацією CSS.

• Більш доступна розмітка із display: contents | Гідде де Вріс
• Display: Contents не є скиданням CSS | Адріан Розеллі

Таблиці

У частині браузерів зміна значення display для елемента <table> на block, grid чи flex змінить його представлення у дереві доступності. Це спричинить до того, що така таблиця не буде коректно оголошена технологією читання з екрана.

• Коротка нотатка про те, що властивість CSS display робить із семантикою таблиці — The Paciello Group
• Прихований вміст для кращої доступності | Go Make Things
• MDN: Розуміння Вказівок з доступності вебконтенту, пояснення Вказівки 1.3
• Розуміння критерію успіху 1.3.1 | W3C Розуміння Вказівок з доступності вебконтенту 2.0

Формальне визначення

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

[ <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>Перший</span>
  <span>Другий</span>
  <span>Третій</span>
</article>

<article class="container">
  <span>Перший</span>
  <span>Другий</span>
  <span>Третій</span>
</article>

<div>
  <label for="display">Оберіть значення display:</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