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>.

Такі елементи поводяться неначе елементи 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 (display: block, display: inline)

display: flex

display: grid

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

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

Початкове значенняinline
Успадковуєтьсяні
Обчислене значенняas the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.

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

[ <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>inline</option>
    <option>inline-block</option>
    <option>inline flow-root</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>inline grid</option>
    <option>table</option>
    <option>block table</option>
    <option>list-item</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();

Результат

Зверніть увагу на те, що частина значень із кількома ключовими словами додана для ілюстрації, і вони мають наступні еквіваленти:

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

Більше прикладів можна знайти на сторінках для кожного окремого типу даних display у розділі Згрупованих значень.

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
display
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
contents
Chrome Full support 65
Edge Full support 79
Firefox Full support 37
Internet Explorer No support Ні
Opera Full support 52
Safari Full support 11.1
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 37
Opera Android Full support 47
Safari on iOS Full support 11.3
Samsung Internet Full support 9.0
Specific behavior of unusual elements when display: contents is applied to them
Chrome Full support 65
Edge Full support 79
Firefox Full support 59
Internet Explorer No support Ні
Opera Full support 52
Safari No support Ні
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android Full support 59
Opera Android Full support 47
Safari on iOS No support Ні
Samsung Internet Full support 9.0
<display-outside> Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
flex
Chrome Full support 29
Edge Full support 12
Firefox Full support 20
footnote
Internet Explorer Partial support 11
footnote
Opera Full support 16
Safari Full support 9
WebView Android Full support 4.4
Chrome Android Full support 29
Firefox for Android Full support 20
footnote
Opera Android Full support 16
Safari on iOS Full support 9
Samsung Internet Full support 2.0
flow-root
Chrome Full support 58
Edge Full support 79
Firefox Full support 53
Internet Explorer No support Ні
Opera Full support 45
Safari Full support 13
WebView Android Full support 58
Chrome Android Full support 58
Firefox for Android Full support 53
Opera Android Full support 43
Safari on iOS Full support 13
Samsung Internet Full support 7.0
grid
Chrome Full support 57
Edge Full support 16
Firefox Full support 52
Internet Explorer Partial support 10
prefix footnote
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
footnote
inline-block
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 8
Opera Full support 7
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
inline-flex
Chrome Full support 29
Edge Full support 12
Firefox Full support 20
footnote
Internet Explorer Full support 11
Opera Full support 16
Safari Full support 9
WebView Android Full support 4.4
Chrome Android Full support 29
Firefox for Android Full support 20
footnote
Opera Android Full support 16
Safari on iOS Full support 9
Samsung Internet Full support 2.0
inline-grid
Chrome Full support 57
Edge Full support 16
Firefox Full support 52
Internet Explorer Partial support 10
prefix footnote
Opera Full support 44
Safari Full support 10.1
WebView Android Full support 57
Chrome Android Full support 57
Firefox for Android Full support 52
Opera Android Full support 43
Safari on iOS Full support 10.3
Samsung Internet Full support 6.0
footnote
inline-table
Chrome Full support 1
Edge Full support 12
Firefox Full support 3
Internet Explorer Full support 8
Opera Full support 7
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
list-item
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 6
Opera Full support 7
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Supported on <legend>
Chrome Full support 71
Edge Full support 79
Firefox Full support 64
Internet Explorer No support Ні
Opera Full support 58
Safari No support Ні
WebView Android Full support 71
Chrome Android Full support 71
Firefox for Android Full support 64
Opera Android Full support 50
Safari on iOS No support Ні
Samsung Internet Full support 10.0
Multi-keyword values
Chrome No support Ні
Edge No support Ні
Firefox Full support 70
Internet Explorer No support Ні
Opera No support Ні
Safari Full support 15
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS Full support 15
Samsung Internet No support Ні
none
Chrome Full support 1
footnote
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 7
footnote
Safari Full support 1
WebView Android Full support 37
footnote
Chrome Android Full support 18
footnote
Firefox for Android Full support 4
Opera Android Full support 10.1
footnote
Safari on iOS Full support 1
Samsung Internet Full support 1.0
footnote
ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container
Chrome No support Ні
Edge No support 12 –  79
Firefox Full support 38
Internet Explorer Full support 7
Opera No support Ні
Safari No support Ні
WebView Android No support Ні
Chrome Android No support Ні
Firefox for Android Full support 38
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet No support Ні
table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 8
Opera Full support 7
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також