| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0 + | 2.0 + | 7.0 + | 1.0 + | 1.0 + | 2.1 + | 1.0 + |
Коротка інформація
| Значення за умовчанням | inline |
|---|---|
| Успадковується | ні |
| Застосовується | До всіх елементів |
| http://www.w3.org/TR/CSS21/visuren.html#display-prop |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Багатоцільовий властивість, яка визначає, як елемент повинен бути показаний в документі.
Синтаксис
display: block | inline | inline-block | inline-table | 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, inline, list-item і none . Всі інші допустимі значення підтримуються браузерами вибірково. У табл. 1 наведені деякі популярні браузери і їх підтримка різних значень.
| Значення | Опис | IE6 | IE7 | IE8 | Cr2 | Cr8 | Op9.2 | Op10 | Sa3.1 | Sa5 | Fx3 | Fx4 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | Елемент показується як блоковий. Застосування цього значення для вбудованих елементів, наприклад тега <span> , змушує його вести подібно блокам — відбувається перенос рядків на початку і в кінці вмісту. | |||||||||||
| inline | Елемент відображається як вбудований. Використання блокових тегів, таких як <div> і <p> , автоматично створює перенос і показує вміст цих тегів з новою рядки. Значення inline скасовує цю особливість, тому вміст блокових елементів починається з того місця, де закінчився попередній елемент. | |||||||||||
| inline-block | Це значення генерує блоковий елемент, який обтікають інші елементи веб-сторінки подібно вбудованому елементу. Фактично такий елемент по своїй дії схожий на вбудовані елементи (на кшталт тега <img> ). При цьому його внутрішня частина форматується як блоковий елемент, а сам елемент — як вбудований. | |||||||||||
| inline-table | Визначає, що елемент є таблицею як при використанні тега <table> , але при цьому таблиця є вбудованим елементом і відбувається її обтікання іншими елементами, наприклад, текстом. | |||||||||||
| 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> . |
Приклад
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!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.
Об'єктна модель
[window.] Document.getElementById (" elementID "). 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 2.0, а також Safari версії 3 і старше, iOS:
- значення run-in підтримують тільки для елементів, які розташовуються перед вбудованими елементами або такими, у яких значення display встановлено як inline .
Safari 3.1
- значення table-cell не працює, якщо немає елементів зі значен ями властивості display : table і table-row .