display
Поддержка браузерами
12.0+ | 8.0+ | 3.0+ | 4.0+ | 7.0+ | 3.1+ |
Описание
CSS свойство display указывает тип элемента. От типа элемента зависит то, как он будет отображаться на веб-странице.
Обратите внимание, что по умолчанию в CSS все элементы являются строчными (display:inline). Для переопределения варианта отображения элемента со строчного на блочный, браузеры используют встроенную таблицу стилей, задающую для каждого элемента стили, применяемые к нему по умолчанию. В старых версиях браузеров используется устаревшая встроенная таблица стилей, в которой нет правил для переопределения новых элементов, добавленных в HTML5, в блочные. Поэтому, для таких элементов как <section>, <header>, <nav>, <article>, <aside> и <footer>, способ отображения должен быть задан вручную в таблице стилей:
<style> section, header, nav, article, aside, footer { display: block; } </style>
Такой код не повредит корректному отображению элементов в новых браузерах, а заодно послужит страховкой правильного отображения в их старых версиях.
Все типы элементов, которые имеют разрыв строки до и после элемента относятся к элементам блочного уровня. Все остальные элементы относятся к элементам строчного уровня.
Значение по умолчанию: | inline |
---|---|
Применяется: | ко всем элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.display="inline" |
Синтаксис
display: значение;
Значения свойства
Значение | Описание |
---|---|
none | Элемент исключается из общего потока, он не отображается на экране и под него не резервируется место на странице ( все элементы ведут себя как обычно, как будто этот элемент отсутствует в исходном коде). |
block | Элемент воспринимается браузером, как блочный (например, как <div>), т.е. имеет разрыв строки до и после элемента и занимает всю доступную ширину. Появляется возможность применения свойств для блочных элементов. |
inline | Элемент будет отображаться, как строчный (например, как <span>), содержимое блочных элементов, к которым было применено данное значение, будет начинаться с того места, где окончился предыдущий строчный элемент. |
inline-block | Элемент отображается, как строчный, но появляется возможность применять к нему свойства, доступные только блочным элементам (например: margin, padding). |
list-item | Элемент становится блочным и отображается, как элемент списка (тег <li>) с маркером перед началом содержимого. |
table | Определяет блочный элемент, который ведёт себя как <table>. |
table-caption | Элемент ведёт себя как <caption>. |
table-cell | Элемент ведёт себя как <td>. |
table-column | Элемент ведёт себя как <col>. |
table-column-group | Элемент ведёт себя как <colgroup>. |
table-footer-group | Элемент ведёт себя как <tfoot>. |
table-header-group | Элемент ведёт себя как <thead>. |
table-row | Элемент ведёт себя как <tr>. |
table-row-group | Элемент ведёт себя как <tbody>. |
flex | Преобразует элемент в блочный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.
Примечание: появляется возможность пользоваться следующими свойствами:
|
inline-flex | Преобразует элемент в строчный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами. |
inline-table | Элемент будет вести себя как <table>, но не как блочный, а как строчно-блочный. То есть значение inline-table эквивалентно следующему CSS правилу:
table { display: inline-block;} |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
background-color: red;
display: inline;
}