display

Оновлено: 08.12.2022

display

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

Коротка інформація

Значення за замовчуванням inline
Успадковується Ні
Застосовується До всіх елементів
Анімується Ні

Синтаксис 

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

Значення

block Елемент показується як блоковий. Застосування цього значення для рядкових елементів, наприклад <span>, змушує його поводитися подібно до блоків - відбувається перенесення рядків на початку та в кінці вмісту.
inline Елемент відображається як рядковий. Використання блокових елементів, таких, як <div> і <p>, автоматично створює перенесення і показує їхній вміст із нового рядка. Значення inline скасовує цю особливість, тому вміст блокових елементів починається з того місця, де закінчився попередній елемент.
inline-block Це значення генерує блоковий елемент, який обтікається іншими елементами веб-сторінки подібно до рядкового елемента. Фактично такий елемент за своєю дією схожий на вбудовувані елементи (на кшталт <img>). Водночас його внутрішня частина форматується як блоковий елемент, а сам елемент - як рядковий.
inline-table Визначає, що елемент є таблицею, як при використанні <table>, але при цьому таблиця є рядковим елементом і відбувається її обтікання іншими елементами, наприклад, текстом.
inline-flex Елемент поводиться як рядковий і викладає вміст згідно з флекс-моделлю.
flex Елемент поводиться як блоковий і викладає вміст згідно з флекс-моделлю.
list-item Елемент виводиться як блоковий і додається маркер списку.
none Тимчасово видаляє елемент із документа. Місце, яке він займає, не резервується, і веб-сторінка формується так, немов елемента й не було. Змінити значення і зробити знову видимим елемент можна за допомогою скриптів, звертаючись до властивостей через об'єктну модель. У цьому випадку відбувається переформатування даних на сторінці з урахуванням знову доданого елемента.
run-in Встановлює елемент як блоковий або рядковий, залежно від контексту.
table Визначає, що елемент є блоковою таблицею, подібно до використання <table>.
table-caption Задає заголовок таблиці, подібно до застосування <caption>.
table-cell Вказує, що елемент являє собою клітинку таблиці (<td> або <th>).
table-column Призначає елемент колонкою таблиці, немов було додано <col>.
table-column-group Визначає, що елемент є групою однієї або більше колонок таблиці, як при використанні <colgroup>.
table-footer-group Використовується для зберігання одного або декількох рядків комірок, які відображаються в самому низу таблиці. За своєю дією схоже з роботою <tfoot>.
table-header-group Елемент призначений для зберігання одного або декількох рядків комірок, які представлені вгорі таблиці. За своєю дією подібний до роботи <thead>.
table-row Елемент відображається як рядок таблиці (<tr>).
table-row-group Створює структурний блок, що складається з декількох рядків таблиці, аналогічно дії <tbody>.

Приклад

Об'єктна модель

Об'єкт.style.display

Примітка

Internet Explorer до версії 7 включно:

  • підтримка значень table-footer-group і table-header-group відбувається тільки для елементів <thead> і <tfoot>;
  • для елементів <li> розуміє значення block як list-item;
  • значення inline-block застосовується тільки для рядкових елементів, з блоковими елементами працює некоректно.

Opera 9.2, а також Firefox 2.0:

  • значення table-column застосовується тільки для <col>;
  • значення table-column-group підтримується тільки для <colgroup>.

Chrome до версії 4, а також Safari до версії 5:

  • значення run-in підтримують тільки для елементів, які розташовуються перед рядковими елементами або такими, у яких значення display встановлено як inline.

Safari 3.1

  • Значення table-cell не працює, якщо немає елементів зі значеннями властивості display: table і table-row.

Chrome 32

  • Значення run-in більше не підтримується.

Браузери

display

Переглянути сумісність з Can I use?

display