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

display

CSS display

Свойство 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.1%
10
0.03%
11
0.94%
Edge
88
0.74%
89
2.61%
90
0%
Firefox
85
0.12%
86
2.12%
87
0.45%
88
0.01%
89
0%
Chrome
88
9.08%
89
15.12%
90
0.03%
91
0.02%
92
0%
Safari
13
0.11%
13.1
0.51%
14
3.05%
TP
0%
Safari on iOS
13.3
0.22%
13.4-13.7
0.77%
14.0-14.5
11.85%
Chrome for Android
89
37.35%

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

display: run-in

IE
9
0.1%
10
0.03%
11
0.94%
Edge
88
0.74%
89
2.61%
90
0%
Firefox
85
0.12%
86
2.12%
87
0.45%
88
0.01%
89
0%
Chrome
88
9.08%
89
15.12%
90
0.03%
91
0.02%
92
0%
Safari
13
0.11%
13.1
0.51%
14
3.05%
TP
0%
Safari on iOS
13.3
0.22%
13.4-13.7
0.77%
14.0-14.5
11.85%
Chrome for Android
89
37.35%

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

CSS display: contents

IE
9
0.1%
10
0.03%
11
0.94%
Edge
88
0.74%
89
2.61%
90
0%
Firefox
85
0.12%
86
2.12%
87
0.45%
88
0.01%
89
0%
Chrome
88
9.08%
89
15.12%
90
0.03%
91
0.02%
92
0%
Safari
13
0.11%
13.1
0.51%
14
3.05%
TP
0%
Safari on iOS
13.3
0.22%
13.4-13.7
0.77%
14.0-14.5
11.85%
Chrome for Android
89
37.35%

Примечание

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

Пример