CSS свойство display

Определяет, как элемент должен быть показан в документе (тип его отображения)

CSS синтаксис

display: значение;

Возможные значения

Значение Описание
inline Элемент отображается как встроенный (подобно <span>).
block Элемент отображается как блоковый (подобно <div>).
flex Элемент отображается как flex-контейнер блочного уровня (гибкий контейнер). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-block Генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный.
inline-flex Элемент отображается как flex-контейнер встроенного уровня (гибкий элемент). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-table Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и обтекается другими элементами.
list-item Элемент ведет себя подобно элементу <li>.
run-in Генерирует либо встроенный, либо блочный элемент в зависимости от контекста.
table Элемент ведет себя подобно элементу <table>.
table-caption Элемент ведет себя подобно элементу <caption>.
table-column-group Элемент ведет себя подобно элементу <colgroup>.
table-header-group Элемент ведет себя подобно элементу <thead>.
table-footer-group Элемент ведет себя подобно элементу <tfooter>.
table-row-group Элемент ведет себя подобно элементу <tbody>.
table-cell Элемент ведет себя подобно элементу <td>.
table-column Элемент ведет себя подобно элементу <col>.
table-row Элемент ведет себя подобно элементу <tr>.
none Элемент не отображается (и не имеет никакого воздействия на верстку страницы).
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Совместимость: Полностью поддерживаются всеми браузерами только значения block, inline, list-item и none. Значения inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row и table-row-group не поддерживаются IE7 и более ранними версиями. В IE8 требуется декларация !DOCTYPE. IE9 поддерживает все значения. В Safari для значений flex и inline-flex требуется указывать префикс, например, "display: -webkit-flex" и "display: -webkit-inline-flex;".

Пример

Отображаем параграф, как встроенный элемент


p.inline {
     display: inline;
}