Display

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Част Част ? Част Част Част Да Да Да Да Да Част Част Част

(Част - частично)

CSS CSS2
Значение по умолчанию inline
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет

Описание

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

Синтаксис

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>. Нет Нет ? Да Да Да Да Да

Пример

<!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=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>

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

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