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. Все остальные значения поддерживаются браузерами выборочно.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.