CSS-свойство display указывает тип элемента. Каждый тип устанавливает некие правила для взаимодействия с другими элементами и своего содержимого.
| Значение по умолчанию: | inline |
| Применяется к: | Все элементы |
| Наследование: | Нет |
| Анимирование: | Нет. Анимируемые свойства |
| Версия: | CSS 1, 2, 3 |
- Если значение
displayне указано явно, для абсолютно-позиционированных и floated элементов оно вычисляется самостоятельно. - Если для свойства
displayустановлено значениеnone— элемент вообще не создает никаких блоков и не влияет на макет; элемент и его содержимое полностью удаляются из структуры и документ отображается так, будто бы элемент никогда не существовал в дереве документа.
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inheritПримеры написания кода свойства display:
div {
display: inline;
}
span {
display: block;
}Значения свойств
В следующей таблице описаны значения этого свойства.
| Значение | Описание |
|---|---|
inline |
Устанавливает свойства строчного элемента. |
block |
The element generates a блочного элемента. |
contents |
Для самого элемента не устанавливается специфических свойств, но для потомков и псевдо-элементы устанавливаются поля (boxes) и текст работает как обычно. |
flex |
Устанавливает свойства flex-содержимого для элемента. |
flow |
Элемент устанавливает свое содержимое, используя макет потока (линейно-блочный макет). |
flow-root |
Элемент генерирует блок-контейнер box, и выкладывает его содержимое, используя макет потока. |
grid |
Устанавливает свойства grid-сетки для элемента. |
inline-block |
Устанавливает свойства блочного элемента, который обтекается другими элементами подобно встроенному элементу. |
inline-flex |
Устанавливает свойства flex-содержимого для элемента, но он обтекается другими элементами подобно встроенному элементу. |
inline-grid |
Устанавливает свойства grid-сетки для элемента, но он обтекается другими элементами подобно встроенному элементу. |
inline-table |
Устанавливает свойства тега table для элемента, но он обтекается другими элементами подобно встроенному элементу. |
list-item |
Устанавливает свойства блочного элемента и добавляется маркер списка. |
run-in |
Элемент ведет себя как блочный или строчный в зависимости от контекста. |
table |
Элемент ведет себя как <table> |
table-caption |
Элемент ведет себя как <caption> |
table-column-group |
Элемент ведет себя как<colgroup> |
table-header-group |
Элемент ведет себя как <thead> |
table-footer-group |
Элемент ведет себя как <tfoot> |
table-row-group |
Элемент ведет себя как <tbody> |
table-cell |
Элемент ведет себя как <td> |
table-column |
Элемент ведет себя как <col> |
table-row |
Элемент ведет себя как <tr> |
none |
Отключить отображение элемента. У всех дочерних элементов также отключено отображение, даже если их свойство display установлено не none. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента display. |
Поддержка браузеров
Свойство display поддерживается во всех основных браузерах.
- Такие значения, как
contents,flow-root,run-inи т. д., плохо поддерживаются в большинстве браузеров. Вы должны стараться избегать их использования в настоящее время. - Вообще, список возможных значений этого свойства которые поддерживаются всем браузерами очень короткий — block, inline, list-item и none. Все остальные значения поддерживаются браузерами выборочно.
