css властивість display

Властивість display вказує тип блока, який використовується для HTML-елемента.

Властивість `display`

У HTML тип блоку без задання виставляється браузером згідно із актуальною версією специфікації або його налаштувань. У XML значенням без задання для всіх елементів є inline.

Додатково до різних типу блоків, існує значення none, яке приховує елемент зі сторінки та прибирає його з потоку - так ніби його і не було.

Властивість display задається з використанням значень ключових слів. Значення ключових слів згруповані за шістьма категоріями:

<display-outside>
<display-inside>
<display-listitem>
<display-internal>
<display-box>
<display-legacy>

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

Нотатка:	Значення `inline-table`, `table`, `table-caption`, `table-cell`, `table-column`, `table-column-group`, `table-row` та `table-row-group` не підтримуються в IE7 і більш ранніх версіях. IE8 вимагає `!DOCTYPE`. IE9 підтримує вже ці значення.
Нотатка:	Значення `flex` і `inline-flex` вимагає префікс для роботи в Safari. Для `flex` використовуйте `display: -webkit-flex`, для `inline-flex` використовуйте `display: -webkit-inline-flex;`

Синтаксис

display: block | inline | inline-block | inline-table |inline-flex | flex | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group| initial| inherit;

Властивість display може отримувати 20 значень:


block: Елемент показується як блоковий. Вказавши це значення для елемента <span> - він почне вести себе як блоковий, тобто, його вміст буде завжди починатися з нового рядка.

inline: Елемент відображається як рядковий (<span>). Значення inline скасовує особливість блокових елементів завжди починатися з нового рядка.

inline-block: Це значення створює блоковий елемент, який поводить себе подібно рядковому елементу. Його внутрішня частина форматується як у блокового елемента, а сам елемент - як рядковий. Так себе поводить елемент <img>.

inline-table: Визначає, що елемент є таблицею <table> , але при цьому таблиця поводить себе як рядковий елемент і обтікається іншими елементами.

inline-flex: Елемент поводиться як рядковий і викладає вміст згідно флекс-моделі. З'явився тільки у CSS3.

flex: Елемент поводиться як блоковий і викладає вміст згідно флекс-моделі

list-item: Елемент поводить себе так само як елемент <li>.

none: Приховує елемент. Макет формується, немов елемента і не було. Зробити видимим елемент можна за допомогою скриптів. При цьому відбувається переформатування даних на сторінці з урахуванням знову доданого елемента.

run-in: Встановлює елемент як блоковий або рядковий залежно від контексту.

table: Надає елементу елементу якостей таблиці <table>.

table-caption: Задає заголовок таблиці подібно застосуванню <caption>

table-cell: Вказує, що елемент являє собою елемент таблиці (<td> або <th>)

table-column-group: Елемент поводить себе ніби він елемент <colgroup>.

table-column: Елемент поводить себе ніби він елемент <col>.

table-footer-group: Використовується для зберігання однієї або декількох рядків комірок, які відображаються в самому низу таблиці. За своєю дією схожий з роботою <tfoot>

table-header-group: Елемент призначений для зберігання одного чи кількох рядків комірок, які представлені у верхній частині сторінки. За своєю дією схожий з роботою <thead>

table-row: Елемент відображається як рядок таблиці <tr>

table-row-group: Елемент аналогічний дії елемента <tbody>.

initial: Встановлює властивість у значення без задання

inherit: Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:	inline
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object.style.display="none"

Переглядач
none, inline, block	1.0	4.0	1.0	1.0	7.0	12.0
inline-block	1.0	5.5	3.0	1.0	7.0	12.0
inline-flex, flex	29.0	11.0	28.0	9.0	17.0	12.0
list-item	1.0	6.0	1.0	1.0	7.0	12.0
run-in	1.0	8.0	Не підтримується	1.0	7.0	12.0
inline-table	1.0	8.0	3.0	1.0	7.0	12.0
table-*	1.0	8.0	1.0	1.0	7.0	12.0

Переглядач
none, inline, block	1.0	1.0	1.0
inline-block	1.0	1.0	1.0
inline-flex, flex	4.4	28.0	9.2
list-item	1.0	1.0	1.0
run-in	1.0	Не підтримується	1.0
inline-table	1.0	1.0	1.0
table-*	1.0	1.0	1.0

Мобільних переглядачів ще не додано.

Приклади

Демонстрація роботи різних значень властивості display

See the Pen <a href='https://codepen.io/MichaelBondar/pen/RZRbWX/'>RZRbWX</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Різні типи блоків

See the Pen <a href='https://codepen.io/MichaelBondar/pen/yoJBBb/'>display-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Динамічний приклад

See the Pen <a href='https://codepen.io/MichaelBondar/pen/LQPdRW/'>LQPdRW</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Демонстрація роботи властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/ZrzxpE/'>ZrzxpE</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.