display

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

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

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

Синтаксис

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

/* складені значення */
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 flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

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

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

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

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

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

<display-outside>

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

block

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

inline

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

Примітка: У випадку отримання виключно зовнішнього значення (наприклад, display: block, чи display: inline) ті браузери, що підтримують синтаксис із кількома значеннями – ключовими словами, встановлюють внутрішнє значення у flow. Така логіка призводить до очікуваної поведінки, наприклад: описавши елемент як block, очікуємо, що нащадки такого елемента братимуть участь у блоковій та рядковій звичайних потокових розкладках.

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

<display-inside>

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

flow

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

flow-root

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

table

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

flex

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

grid

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

ruby

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

Примітка: Браузери, що підтримують синтаксис із кількома значеннями – ключовими словами, отримуючи виключно внутрішнє значення, наприклад, display: flex, чи display: grid, встановлюють внутрішнє значення у block. Така логіка призводить до очікуваної поведінки, наприклад: описавши елемент як grid, очікуємо, що для сіткового контейнера буде створено рамки блокового рівня.

Пункт списку

<display-listitem>

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

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

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

Примітка: У браузерах, що підтримують синтаксис із кількома значеннями – ключовими словами, якщо внутрішнє значення не вказане, то воно вважається рівним 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.

Який синтаксис слід використовувати сьогодні?

Специфікація рівня 3 вимагає два значення для властивості display, аби дати змогу вказати зовнішній та внутрішній типи представлення явно, — однак це поки не підтримується браузерами як слід.

Складені методи <display-legacy> дають змогу досягнути тих самих результатів з одним ключовим значенням, і розробники повинні надавати йому перевагу, поки двослівний синтаксис не отримає більшої підтримки. Наприклад, при використанні двох значень можна було б описати рядковий flex-контейнер наступним чином:

.container {
  display: inline flex;
}

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

.container {
  display: inline-flex;
}

Аби отримати більше інформації про ці зміни до специфікації, перегляньте статтю Пристосування до нового синтаксису display із кількома ключовими словами.

Глобальні

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

Опис

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

• Пристосування до синтаксису display із кількома значеннями – ключовими словами

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

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

display: flex

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

display: grid

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

Занепокоєння щодо доступності

display: none

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

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

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>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>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();

Результат

Примітка: Більше прикладів можна знайти на сторінках кожного окремого типу представлення даних, посилання — вище.

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

              <br />
              <small>
                  # the-display-properties
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>