display

Браузер	Internet Эксплорер				Нетscape		Опера				Safari			Файер фох
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Част.	Част.	Част.	?	Част.	Част.	Част.	Част.	Да	Да	Да	Да	Да	Част.	Част.	Част.

Част — Поддерживается частично.

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

CSS (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Аналог ШТМЛ	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.ШТМЛ#display-prop

Описание

Многоцелевой атрибут, который определяет, как элемент должен быть показан в файле.

Синтаксис

Аргументы

Список возможных значений этого атрибута, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые аргументы поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных свойств.

Табл. 1. Поддержка браузерами значений свойства display
Аргумент	Описание	ИЕ6	IE7	IE8	Op 8	Op 9.2	Ff 1.5	Ff 2	Ff 3
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.	Да	Да	Да	Да	Да	Да	Да	Да
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.	Да	Да	Да	Да	Да	Да	Да	Да
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами web-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.	Да	Да	Да	Да	Да	Нет	Нет	Да
inline-table	Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, контентом.	Нет	Нет	?	Да	Да	Нет	Нет	Да
list-item	Элемент выводится как блочный и добавляется маркер списка.	Да	Да	Да	Да	Да	Да	Да	Да
none	Временно удаляет элемент из объекта. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента.	Да	Да	Да	Да	Да	Да	Да	Да
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>.	Нет	Нет	?	Да	Да	Да	Да	Да

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <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 ШТМЛ PUBLIC &quot;-//W3C//DTD ШТМЛ 4.01 Transitional//EN&quot;&gt;<br>
  &lt;ШТМЛ&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;/ШТМЛ&gt;
  </p>
  
 </body>
</html>

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

Рис. 1

Рис. 1. Применение параметра display

Объектная модель

[window.]document.getElementById("elementID").style.display

Браузеры

Internet Эксплорер до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и <TFOOT>;
для элементов <LI> понимает значение block как list-item;
значение inline-block применяется только для встроенных элементов.

Опера 9.2 и старше, а также Файер фох версии 2.0 и младше:

значение table-column применяется только для тега <COL>;
значение table-column-group поддерживается только для тега <COLGROUP>.