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

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

У 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 підтримує вже ці значення.

автор: NagarD правити

Нотатка

Значення flex і inline-flex вимагає префікс для роботи в Safari. Для flex використовуйте display: -webkit-flex, для inline-flex використовуйте display: -webkit-inline-flex;

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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 може отримувати 23 значень:

block

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

автор: NagarD

правити

inline

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

автор: NagarD

правити

inline-block

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

автор: NagarD

правити

inline-table

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

автор: NagarD

правити

inline-flex

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

автор: NagarD

правити

flex

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

автор: NagarD

правити

list-item

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

автор: NagarD

правити

none

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

автор: NagarD

правити

run-in

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

автор: NagarD

правити

table

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

автор: NagarD

правити

table-caption

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

автор: NagarD

правити

table-cell

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

автор: NagarD

правити

table-column-group

Елемент поводить себе ніби він елемент <colgroup>.

автор: NagarD

правити

table-column

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

автор: NagarD

правити

table-footer-group

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

автор: NagarD

правити

table-header-group

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

автор: NagarD

правити

table-row

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

автор: NagarD

правити

table-row-group

Елемент аналогічний дії елемента <tbody>.

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

grid

Елемент поводиться як блоковий елемент та розміщує свій вміст відповідно до моделі grid

автор: NagarD

правити

inline-grid

Елемент поводиться як рядковий та розміщує свій вміст відповідно до моделі grid.

автор: NagarD

правити

contents

Змушує контейнер зникати, роблячи дочірні елементи дочірніми елементами наступного рівня в DOM

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці