Определяет, как элемент должен быть показан в документе (тип его отображения)
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;
}
