display

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
			+

Описание

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

Синтаксис

Значения

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

Табл. 1. Поддержка браузерами значений display

Значение

Описание

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

Пример

<!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: solid 1px 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>

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

Рис. 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>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Категория: Видимость и формат