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;
}