display

Общие сведения

Все элементы на веб-странице - прямоугольные (смотрите свойство box-sizing чтобы больше узнать об этом). Тип блока в конечном итоге влияет на его визуальное поведение на странице.

В CSS есть два основных формата: inline и block.

Строчные элементы (iniline-level элементы) являются частью строки и не вызывают её прерывания. Типичными примерами являются HTML-элементы <span>, <em>, и <img>.

Блочные элементы (block-level элементы), с другой стороны, не находятся в строке. Они разрывают строку и стараются занять как можно больше горизонтального пространства.

Синтаксис свойства

• Синтаксис:

  display: inline | block | list-item | inline-block | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

• Значение по умолчанию: inline
• Применяется: ко всем элементам и псевдоэлементам ::before и ::after
• Наследуется: нет
• Анимируется: нет

Значения свойства

• none - элемент полностью удаляется из потока страницы. Все дочерние элементы также удаляются со страницы. Страница отображается так как-будто этот элемент вообще не существует. Это значение нельзя переопределить устанавливая display в видимое значение для дочерних элементов.
• inline - создаёт строчный тип элемента.
• inline-block - создаёт строчно-блочный тип элемента. Похож на строчный тип, за исключением того что он позволяет задавать ширину и высоту 
• block - создаёт блочный тип элемента.
• list-item - создаёт блочный тип элемента и добавляет маркер списка.
• run-in - ведёт себя следующим образом:
  • Если  run-in содержит блочный элемент, то он ведёт себя как блочный тип.
  • Если после run-in идёт блочный элемент, то run-in элемент становится первым элементом внутри блочного элемента.
  • В других случаях ведёт себя как блочный тип.
• inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption - каждое из этих значений заставляет элемент вести себя так как ведёт себя соответствующий HTML-элемент таблицы.
• flex - создаёт блочный тип элемента, а выводит содержимое в нём в соответствии с правилами Flexbox.
• inline-flex - создаёт строчный тип элемента, а выводит содержимое в нём в соответствии с правилами Flexbox.
• grid - создаёт блочный тип элемента, а выводит содержимое в нём в соответствии с правилами CSS Grid.
• inline-grid - создаёт строчный тип элемента, а выводит содержимое в нём в соответствии с правилами CSS Grid.
• contents - тип элемента не создаётся, но его дочерние элементы создают свои типы и текст внутри него отображается как обычно.

Поддержка браузерами

Все основные значения свойства display поддерживаются во всех основных браузерах.

Поддержка браузерами display:table-*

Поддержка браузерами dispay:run-in

Поддержка браузерами display:contents

Примечание

Тип элемента указанный с помощью свойства display также зависит от свойств float и position. Эти три свойства взаимодействуют между собой и влияют на созданный тип элемента. Обратитесь к этой таблице чтобы узнать как значения этих свойств взаимодействуют между собой.

Пример