Свойство display управляет тем, как элемент будет визуализироваться в браузерном окне. С его помощью можно изменить стандартное поведение любого элемента. Важно помнить: по умолчанию все элементы в CSS считаются строчными (display:inline). Чтобы превратить их в блочный элемент, браузер опирается на собственный набор базовых правил. В старых версиях эти правила были устаревшими и не покрывали новых HTML5-элементов (section, header, nav, article, aside, footer). Поэтому для них нужно явно задать display:block в своих стилях. /* style */section, header, nav, article, aside, footer { display: block; }/* /style */Этот фрагмент не нарушит работу современных браузеров и одновременно обезопасит от некорректного отображения в более старых. | Базовое значение: | inline |
|---|
| Происходит наследование: | нет |
|---|
| Классификация: | CSS1 |
|---|
| Синтаксис JavaScript: | object.style.display="inline" |
|---|
| Значение | Описание |
|---|
| none | Элемент исключается из общего потока: он не виден на экране, и под него не резервируется место (весь контент ведёт себя так, как будто элемент отсутствует в исходном коде). | | block | Блочный элемент получает разрыв строки до и после себя, занимает всю доступную ширину, а также позволяет использовать свойства, характерные для блочных элементов. | | inline | Элемент отображается как строчный: его содержимое продолжается сразу после предыдущего элемента без разрыва строки. | | inline-block | Строчная форма, но с возможностью применять блочные свойства (margin, padding и т.д.). | | list-item | Элемент становится блочным и получает маркер списка перед содержимым. | | table | Отображается как таблица. | | table-caption | Становится заголовком таблицы. | | table-cell | Показывается в виде ячейки таблицы. | | table-column | Определяет колонку таблицы. | | table-column-group | Обозначает группу колонок (элемент colgroup).
| | table-footer-group | Отображается как нижняя часть таблицы. | | table-header-group | Показывает заголовочную часть таблицы. | | table-row | Отображается как строка таблицы. | | table-row-group | Собирает несколько строк в одну группу. | | inherit | Значение наследуется от родительского элемента. |
Пример
|