Багатоцільова властивість, яка визначає, як елемент повинен бути показаний у документі.
Коротка інформація
| Значення за замовчуванням | inline |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементам |
| Анімується | Ні |
Синтаксис
<code>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
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- block
- Елемент показується як блоковий. Застосування цього значення для малих елементів, наприклад <span>, змушує його вести подібно до блоків — відбувається перенесення рядків на початку та в кінці вмісту.
- inline
- Елемент відображається як рядковий. Використання блокових елементів, таких як <div> та <p>, автоматично створює перенос і показує їх вміст з новою рядки. Значення inline скасовує цю особливість, тому вміст блокових елементів починається з того місця, де закінчився попередній елемент.
- inline-block
- Це значення генерує блоковий елемент, який обтікається іншими елементами веб-сторінки подібно до рядкового елементу. Фактично такий елемент за своєю дією схожий на елементи, що вбудовуються (на зразок <img>). При цьому його внутрішня частина форматується як блоковий елемент, а сам елемент — як рядковий.
- inline-table
- Визначає, що елемент є таблицею, як при використанні <table>, але при цьому таблиця є рядковим елементом і відбувається її обтікання іншими елементами, наприклад, текстом. dt>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>.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>display</title> <style> .example { border: dashed 1px #634f36; /* Параметри рамки */
background: #fffff5; /* Колір тла */
font-family: "Courier New", Courier, monospace; /* Шрифт тексту */
padding: 7px; /* Поля навколо тексту */
margin: 0 0 1em; /* Відступи */
}
.exampleTitle { border: 1px solid black; /* Параметри рамки */
border-bottom: none; /* Забираємо лінію знизу */
padding: 3px; /* Поля навколо тексту */
display: inline; /* Встановлюємо як малий елемент */
background: #efecdf; /* Колір тла */
font-weight: bold; /* Жирне зображення */
font-size: 90%; /* Розмір тексту */
margin: 0; /* Забираємо відступи */
white-space: nowrap; /* Скасуємо перенесення тексту */
}
</style>
</head>
<body> <p class="exampleTitle">Приклад</p> <p class="example"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <body><br> <b>Формула сірчаної кислоти:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i><br> </body><br> </html></p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Рис. 1. Застосування властивості display
Об'єктна модель
Об'єкт. 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 3 2
- Значення run-in більше не підтримується.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Display Module Level 3 | Можлива рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| none, inline, block | 4 | 12 | 1 | 7 | 1 | 1 |
| inline-block | 5.5 | 12 | 1 | 7 | 1 | 3 |
| inline-flex, flex | 11 | 12 | 29 | 17 | 9 | 28 |
| list-item | 6 | 12 | 1 | 7 | 1 | 1 |
| run-in | 8 | 12 | 1 | 7 | 1 | |
| inline-table | 8 | 12 | 1 | 7 | 1 | 3 |
| table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption | 8 | 12 | 1 | 7 | 1 | 1 |
| none, inline, block | 1 | 1 | 1 | |
| inline-block | 1 | 1 | 8 | 1 |
| inline-flex, flex | 4.4 | 28 | 12.1 | 9.2 |
| list-item | 1 | 1 | 8 | 1 |
| run-in | 1 | 8 | 1 | |
| inline-table | 1 | 1 | 8 | 1 |
| table, table-cell, table-column, table-column-group,table-header-group,table-row-group,table-footer-group,table-row,table-caption | 1 | 1 | 8 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість під тримається лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.