Все значения свойства display

Свойство display имеет много разных значений. Обычно, используются только три из них: none, inline и block, потому что когда-то браузеры другие не поддерживали. Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

Значение block

Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).
Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно. Это значение display многие элементы имеют по умолчанию: div, заголовок h1, параграф p.

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

Значение inline

Элементы располагаются на той же строке, последовательно. Ширина и высота элемента определяются по содержимому. Поменять их нельзя. Например, инлайновые элементы по умолчанию: , . Ширина Игнорируется Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML. Если расположить элементы вплотную – его не будет: БезПробела Содержимое инлайн-элемента может переноситься на другую строку. При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является. Это проявляется, например, при назначении фона. Например, три прямоугольника подряд: Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока. Как и инлайн-элемент: Располагается в строке. Размер устанавливается по содержимому. Во всём остальном – это блок, то есть: Элемент всегда прямоугольный. Работают свойства width/height. Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров. Например:

• Инлайн Блок
  3 строки
  высота/ширина явно не заданы
• Инлайн
  Блок 100x100
• Инлайн
  Блок 60x60
• Инлайн
  Блок 100x60
• Инлайн
  Блок 60x100

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

• Инлайн Блок
  3 строки
  высота/ширина явно не заданы
• Инлайн
  Блок 100x100
• Инлайн
  Блок 60x60
• Инлайн
  Блок 100x60
• Инлайн
  Блок 60x100

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-* Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display. Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.
Пример использования:

Имя:

Фамилия:

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте. Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
С точки зрения современного CSS, обычные table, tr, td и т.д. – это просто brэлементы с предопределёнными значениями 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 }ub485127sav
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали. Это можно использовать для центрирования:

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV, это допустимо. При этом он ведёт себя как ячейка TD, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align. Значения list-item, run-in и flex У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко: list-item Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами: run-in Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block. Если ваш браузер поддерживает это значение, то в примере ниже h3, благодаря display:run-in, окажется визуально внутри div:

Про пчёл.

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in. Вот, для примера, правильный вариант отображения run-in, оформленный другим кодом: Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in. На момент написания этой статьи только IE поддерживал display:run-in. flex-box Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module