Свойство display определяет, как должен отображаться элемент в окне браузера. Оно используется для переопределения варианта отображения по умолчанию.
Обратите внимание, что по умолчанию в CSS все элементы являются строчными (display:inline). Для переопределения варианта отображения элемента со строчного на блочный, браузеры используют встроенную таблицу стилей, задающую для каждого элемента стили, применяемые к нему по умолчанию. В старых версиях браузеров используется устаревшая встроенная таблица стилей, в которой нет правил для переопределения новых элементов, добавленных в HTML5, в блочные. Поэтому, для таких элементов как , , , , и , способ отображения должен быть задан вручную в таблице стилей:
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 |
Указывает, что значение наследуется от родительского элемента. |
Пример
|