Свойство display

display_noneСвойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить тип генерируемого контейнера. Свойство не наследуется.

Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.

Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.

Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.

Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.

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

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 Наследует свойство от родительского элемента.
  • Создание Сайтов

    Покуда буду работать вебмастером и покуда будет существовать этот сайт, столько и буду тут обучаться и совершенствоваться.

    • Веб-разработка подразумевает постоянное обучение, если хотите быть востребованы на рынке.