Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу 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.15%
10
0.09%
11
2.64%
Edge
15
0.07%
16
0.26%
17
1.38%
18
0%
Firefox
59
0.08%
60
0.45%
61
2.91%
62
0.09%
63
0%
Chrome
66
0.53%
67
23.47%
68
0.59%
69
0.04%
70
0%
Safari
10.1
0.22%
11
0.22%
11.1
1.37%
12
0.01%
TP
0%
iOS Safari
10.3
0.61%
11.0-11.2
1.3%
11.3-11.4
7.25%
12
0.07%
Chrome for Android
67
32.65%

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

display: run-in

IE
9
0.15%
10
0.09%
11
2.64%
Edge
15
0.07%
16
0.26%
17
1.38%
18
0%
Firefox
59
0.08%
60
0.45%
61
2.91%
62
0.09%
63
0%
Chrome
66
0.53%
67
23.47%
68
0.59%
69
0.04%
70
0%
Safari
10.1
0.22%
11
0.22%
11.1
1.37%
12
0.01%
TP
0%
iOS Safari
10.3
0.61%
11.0-11.2
1.3%
11.3-11.4
7.25%
12
0.07%
Chrome for Android
67
32.65%

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

CSS display: contents

IE
9
0.15%
10
0.09%
11
2.64%
Edge
15
0.07%
16
0.26%
17
1.38%
18
0%
Firefox
59
0.08%
60
0.45%
61
2.91%
62
0.09%
63
0%
Chrome
66
0.53%
67
23.47%
68
0.59%
69
0.04%
70
0%
Safari
10.1
0.22%
11
0.22%
11.1
1.37%
12
0.01%
TP
0%
iOS Safari
10.3
0.61%
11.0-11.2
1.3%
11.3-11.4
7.25%
12
0.07%
Chrome for Android
67
32.65%

Примечание

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

Пример

Здесь прописать свой код адсенс