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

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

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

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

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

• <display-outside>

• <display-inside>

• <display-listitem>

• <display-internal>

• <display-box>

• <display-legacy>

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

Синтаксис

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;

none

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

inline

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

block

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

inline-block

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

flex

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

inline-flex

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

grid

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

inline-grid

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

list-item

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

run-in

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

table

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

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

contents

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

initial

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

inherit

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

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