Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

display

CSSdisplay
mangohost

Свойство 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-*

CSS Table display

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

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

display: run-in

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

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

CSS display: contents

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Примечание

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

Пример

mangohost