display

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

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

CSS | CSS2
Значення за умовчанням | inline
Наслідує | Ні
Застосовується | До усіх елементів
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visuren.html#display - prop

Опис

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

Синтаксис

display: block | inline | inline - table | list - item | none | run - in | table | table - caption | table - cell | table - column - group | table - footer - group | table - header - group | table - row | table - row - group

Значення

Список можливих значень цієї властивості, що розуміється різними браузерами дуже короткий, - block, inline, list - item і none. Усі інші допустимі значення підтримуються браузерами вибірково. У таблиці. 1 приведені деякі популярні браузери і їх підтримка різних значень.

Таблиця. 1. Підтримка браузерами значень display
Значення | Опис | IE6 | IE7 | IE8 | Op 8 | Op 9.2 | Ff 1.5 | Ff 2 | Ff 3
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>. | Ні | Ні | ? | Так | Так | Так | Так | Так

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>display</title>

<style type="text/css">

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

& &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>

& &lt;html&gt;<br>

& &lt;body&gt;<br>

& &lt;b&gt;Формула сірчаної кислоти :&lt;/b&gt;

& &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;

SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;

& &lt;/sub&gt;&lt;/i&gt;<br>

& &lt;/body&gt;<br>

& &lt;/html&gt;

</p>

</body>

</html>

Результат цього прикладу показаний ні мал. 1.

Мал. 1. Застосування властивості display

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

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