Свойство display
Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить тип генерируемого контейнера. Свойство не наследуется.
Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.
В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.
Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.
Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.
Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.
| display | |
|---|---|
| Значения: | |
| inline | Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>. |
| block | Элемент генерирует структурный блок, как и тег <div>. |
| flex | Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов. |
| inline-block | Элемент генерирует строковый блок. |
| inline-flex | Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов. |
| inline-table | Элемент определяет структурный блок, который генерирует строковый блок. |
| list-item | Элемент генерирует структурный блок, который отображается как элемент списка <li>. |
| table | Элемент генерирует структурный блок. На странице ведет себя аналогично <table>. |
| table-caption | Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>. |
| table-column | Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>. |
| table-column-group | Элемент объединяет один или несколько столбцов. Аналог — <colgroup>. |
| table-cell | Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>. |
| table-header-group | Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>. |
| table-footer-group | Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>. |
| table-row-group | Элемент объединяет одну или несколько строк. Аналог — <tbody. |
| table-row | Элемент является строкой ячеек. Пример — <tr>. |
| none | Элемент не генерирует никакой контейнер, полностью удаляясь со страницы. |
| inherit | Наследует свойство от родительского элемента. |