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

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

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

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

Додаткові посилання