Свойство DISPLAY

Браузер Internet Explorer Firefox Mozilla Opera Netscape Safari
Версия 5.5 6.0 7.0 1.0 2.0 1.7 7.0 8.0 9.5 6.0 7.0 8.0 1.3.2
Поддержка Част. Част. Част. Част. Част. Част. Част. Част. Поддерживается Поддерживается Част. Част. Част.

Част - поддерживается частично.

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

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

Описание

Данное свойство задает варианты показа элемента.

Синтаксис

Аргументы

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

Таблица 1. Поддержка браузерами значений свойства display
Аргумент Описание IE 6 IE 7 Opera 8 Opera 9.5 Firefox 1.0 Firefox 2
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>. Не поддерживается Не поддерживается Поддерживается Поддерживается Поддерживается Поддерживается

 

Пример

Валидный HTML
Валидный CSS
<!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">
.sample {
 border: dashed 1px #634f36; /* Параметры рамки */
 background: #fffff5; /* Цвет фона */
 font-family: "Courier New", Courier, monospace; /* Шрифт текста */
 padding: 7px; /* Поля вокруг текста */
 margin: 0px 0px 1em; /* Отступы вокруг */
}

.sampleTitle {
 border: 1px solid black; /* Параметры рамки */
 border-bottom: none; /* Убираем линию снизу */
 padding: 3px; /* Поля вокруг текста */
 display: inline; /* Устанавливаем как встроенный элемент */
 background: #efecdf; /* Цвет фона */
 font-weight: bold; /* Жирное начертание */
 font-size: 90%; /* Размер текста */
 margin: 0px; /* Убираем отступы вокруг */
 white-space: nowrap; /* Отменяем переносы текста */
}
</style>
</head>
<body>

<p class="sampleTitle">Пример</p>
<p class="sample">
&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>

Комментарий