Значения свойства "display"

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

	
<div style="border:1px solid black">
Невидимый div (
<div style="display: none">Я - невидим!</div>
) Стоит внутри скобок
</div>

Значение block

Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).

Блок стремится расшириться на всю доступную ширину, если она не указана явно.

Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.

<div style="border:1px solid black">
<div style="border:1px solid blue; width: 50%">Первый</div>
<div style="border:1px solid red">Второй</div>
</div>

Блоки прилегают друг к другу вплотную, если у них нет margin.

Значение inline

Элементы располагаются на той же строке, последовательно. Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

инлайновые элементы по умолчанию: <span>, <a>.

<span style="border:1px solid black">
<span style="border:1px solid blue; width:50%">Ширина</span>
<a style="border:1px solid red">Игнорируется</a>
</span>

В примере выше,между внутренними <span> и <a> есть пробел. Это потому, что он есть в HTML. Если расположить элементы вплотную – его не будет:

<span style="border:1px solid black">
<span style="border:1px solid blue; width:50%">Без</span><a style="border:1px solid red">Пробела</a>
</span>

Содержимое инлайн-элемента может переноситься на другую строку. При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Например, три элемента подряд:

<div style="width:100%">
...<span style="background: lightgreen">
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%
</span>...
</div>

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

<div style="border:1px solid black">
<span style="border:1px solid red">Инлайн</span>
<div style="border:1px solid blue; width:50%">Блок</div>
<span style="border:1px solid red">Инлайн</span>
</div>

Значение inline-block

При этом значении элемент продолжает находиться в строке (inline), но при этом имеет важные свойства блока. Например работают свойства width/height.

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Например:

<style>
li {
display: inline-block;
list-style: none;
border: 1px solid red;
}
</style>

<ul style="border:1px solid black; padding:0">
<li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
<li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
<li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
<li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
<li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
</ul>

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

 <style>
 li {
 display: inline-block;
 list-style: none;
 border:1px solid red;
 vertical-align: middle;
 background: #fcc;
 }
 </style>
 <ul style="border:1px solid black; padding:0">
 <li>Инлайн Блок<br>3 строки<br>высота/ширина явно не заданы</li>
 <li style="width:100px;height:100px">Инлайн<br>Блок 100x100</li>
 <li style="width:60px;height:60px">Инлайн<br>Блок 60x60</li>
 <li style="width:100px;height:60px">Инлайн<br>Блок 100x60</li>
 <li style="width:60px;height:100px">Инлайн<br>Блок 60x100</li>
 </ul>
 

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display.

Для таблицы целиком- table, для строки – table-row, для ячейки – table-cell и т.д.

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

<form style="display: table">
<div style="display: table-row">
<label style="display: table-cell">Имя:</label>
<input style="display: table-cell">
</div>
<div style="display: table-row">
<label style="display: table-cell">Фамилия:</label>
<input style="display: table-cell">
</div>
</form>

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте .

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные <table>, <tr>, <td> и т.д. – это просто элементы с предопределёнными значениями display:

 table    { display: table }
tr      { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

Подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables .

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Пример центрирования:

<style>
div { border:1px solid black }
</style>

<div style="height:100px; display: table-cell; vertical-align: middle">
<div>Элемент<br>С неизвестной<br>Высотой</div>
</div>

Данный блок ведёт себя как ячейка TD, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align.

Значения list-item, run-in и flex

list-item

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку c содержимым блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

<div style="display: list-item; list-style:inside square">Пункт 1</div>

run-in

Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.

Пример:

<h3 style="display: run-in; border:2px solid red">Про пчёл.</h3>
<div style="border:2px solid black">Пчёлы - отличные создания, они делают мёд.</div>

Вот, для примера, альтернативный вариант отображения run-in, оформленный другим кодом:

flex-box

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке.