Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

display

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

Тип свойства

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

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

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

Значения

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

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

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

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

Синтаксис

display: inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

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

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

Версии CSS

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

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаЧастичноДаДа