Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

display

Свойство CSS display используется для изменения типа HTML-элемента — блочный (block), встроенный (inline), элемент списка и так далее. Также надо понимать, что применение свойства display не дает права пренебрегать синтаксисом HTML, например, элемент <P> в любом случае не может содержать блочные теги, даже если к ним применен display: inline.

Тип свойства

Назначение: форматирование.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства CSS display является одно из ключевых слов, задающих тип элемента. К сожалению, полностью поддерживаются всеми браузерами только значения, которые появились еще в CSS 1.

Значения свойства display их описание и поддержка браузерами
Значение	Описание	Поддержка
inline	Элемент ведет себя, как встроенный, то есть не создает до и после себя перевод строк в начало.	Всеми браузерами
block	Применение данного значения преобразует элемент в блочный, то есть он создает до и после себя перевод строк в начало. При добавлении значения block к тегам <LI>, Internet Explorer 6.0 и 7.0 не убирают у них маркеры, то есть действуют так, как будто это значение list-item.	IE 6.0 и 7.0
block		Остальные браузеры
inline-block	Элемент становится блочным, например, у него можно изменять ширину и высоту. Но окружающие элементы воспринимают его как встроенный, то есть он не создает до и после себя переноса строк. Internet Explorer 6.0 и 7.0 выравнивают низ элемента по базовой линии строки, на которой он находится, а все остальные браузеры базовую линию последней строки элемента. Кроме этого, IE 6.0 и 7.0 не поддерживает это значение для блочных элементов и тех, которые ведут себя, как блоки (например, элементы списков).	IE 6.0 и 7.0
		Firefox 2.0
		Остальные браузеры
list-item	Элемент преобразуется в блочный, но со свойствами элемента списка (тег <LI>) к которому можно применить, например, list-style-type. И если их на странице присутствует несколько, то они являются элементами одного списка.	Всеми браузерами
none	Элемент не отображается на странице и никаким образом не влияет на ее форматирование — другие элементы ведут себя так, будто его нет совсем. Это же свойство наследуется всеми потомками элемента, причем его нельзя изменить применив к ним display.	Всеми браузерами
run-in	Элемент становится блочным или встроенным в зависимости от его местонахождения в HTML-коде по следующим правилам: Если элемент run-in содержит блочный элемент, то он тоже становится блочным. Если элемент run-in указан перед блочным элементом, который не является абсолютно позиционированным или всплывающим. То элемент run-in становится первым встроенным элементом данного блочного элемента. В противном случае элемент run-in становится блочным.	IE 6.0 и 7.0
		Firefox 2.0 и выше
		Остальные браузеры
table	Создание блочного элемента определяющего таблицу, подобно тегу <TABLE>.	IE 6.0 и 7.0
table		Остальные браузеры
inline-table	Создание встроенного элемента определяющего таблицу, которая не создает переносы строк, а располагается на одной строке с другими инлайн-элементами. Браузеры, которые поддерживают inline-table совершенно по-разному выравнивают встроенную таблицу относительно строки, на которой она находится: одни совмещают базовую линию строки и низ таблицы, другие — верх, третьи — базовую линию первой строки таблицы.	IE 6.0 и 7.0
		Firefox 2.0
		Остальные браузеры
table-caption	Элемент используется для создания заголовка HTML-таблицы, аналог тега <CAPTION>.	IE 6.0 и 7.0
table-caption		Остальные браузеры
table-column-group	Элемент для группирования одного или нескольких столбцов таблицы, как тег <COLGROUP>.	IE 6.0 и 7.0
table-column-group		Остальные браузеры
table-column	Элемент, определяющий столбец таблицы, как тег <COL>.	IE 6.0 и 7.0
table-column	Элемент, определяющий столбец таблицы, как тег <COL>.	Остальные браузеры
table-header-group	Элемент, предназначен для создания «шапки» таблицы, аналог тега <THEAD>. Причем на него распространяются те же правила: должен указываться перед элементами определяющими тело и футер таблицы, но после заголовка и элементов группирования столбцов. Если в таблице присутствует несколько элементов с display: table-header-group, то только первый станет шапкой, остальные будут отнесены к телу таблицы.	IE 6.0 и 7.0
table-header-group		Остальные браузеры
table-footer-group	Элемент, предназначен для создания футера таблицы, аналог тега <TFOOT>. Должен указываться перед ее телом, но после «шапки». Если в таблице присутствует несколько элементов с display: table-footer-group, то только первый станет футером, остальные будут отнесены к телу таблицы.	IE 6.0 и 7.0
table-footer-group		Остальные браузеры
table-row-group	Создание элемента предназначенного для создания тела таблицы, аналог тега <TBODY>.	IE 6.0 и 7.0
table-row-group		Остальные браузеры
table-row	Элемент для создания ряда (строки) таблицы, аналог тега <TR>.	IE 6.0 и 7.0
table-row		Остальные браузеры
table-cell	Элемент используется для создания ячейки таблицы, аналог тега <TD>.	IE 6.0 и 7.0
table-cell		Остальные браузеры
inherit	Наследует значение свойства CSS display от родительского элемента.	IE 6.0 и 7.0
inherit		Остальные браузеры

Процентная запись: не существует.

Значение по умолчанию: inline.

Синтаксис

Пример CSS: использование display

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство display</title>
  <style type="text/css">
  .table { display: table; width:100%; border-spacing: 5px; border: 5px #03c solid; }
  .caption { display: table-caption; }
  .colgroup { display: table-column-group; }
  .col { display: table-column;}
  .thead { display: table-header-group; background:#ccc; }
  .tfoot { display: table-footer-group; background:#ccc; }
  .tbody { display: table-row-group; }
  .tr { display: table-row; }
  .td { display: table-cell; border: 2px #c03 dashed; }
  </style>
 </head>
 <body>
  <div class="table">
   <div class="caption">Создание таблицы в CSS</div>
   <div class="colgroup">
    <div class="col"></div><div class="col" style="background:#3c0"></div>
   </div>
   <div class="thead">
    <div class="tr"><div class="td">Шапка 1.1</div><div class="td">Шапка 1.2</div></div>
   </div>
   <div class="tfoot">
    <div class="tr"><div class="td">Футер 1.1</div><div class="td">Футер 1.2</div></div>
   </div>
   <div class="tbody">
    <div class="tr"><div class="td">Ячейка 1.1</div><div class="td">Ячейка 1.2</div></div>
    <div class="tr"><div class="td">Ячейка 2.1</div><div class="td">Ячейка 2.2</div></div>
   </div>
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS display.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Частично	Да	Да