display

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

Синтаксис

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. Все остальные допустимые аргументы поддерживаются браузерами выборочно. В таблице ниже приведены некоторые популярные браузеры и их поддержка различных свойств.

Аргумент Описание 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>. Нет Нет ? Да Да Да Да Да

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

Opera 9.2 и старше, а также Firefox версии 2.0 и младше: