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

Синтаксис

Принимает одно из значений: block, inline, inline-block, list-item, none, table, table-cell, inline-table, table-caption, table-column, table-row, table-column-group, table-footer-group, table-header-group, table-row-group, run-in, flex, inline-flex:

селектор {
	display: значение;
}

Значения

Значение Описание
block Блочный элемент.
inline Строчный элемент.
inline-block Строчно-блочный элемент.
list-item Элемент станет пунктом списка и перед ним появится маркер списка.
none Элемент вообще пропадет и все остальные элементы будут вести себя так, как будто этого элемента нет.
table Элемент будет вести себя как таблица.
table-cell Элемент будет вести себя как ячейка таблицы.
inline-table Элемент будет вести себя как таблица, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
table-caption Элемент будет вести себя как тег caption.
table-column Элемент будет вести себя как колонка таблицы.
table-row Элемент будет вести себя как ряд таблицы.
table-column-group Элемент будет вести себя как тег colgroup.
table-footer-group Элемент будет вести себя как тег tfoot.
table-header-group Элемент будет вести себя как тег thead.
table-row-group Элемент будет вести себя как тег tbody.
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста.
flex Устанавливает элемент как блочный, а его потомки станут flex элементами.
inline-flex Устанавливает элемент как строчно-блочный, а его потомки станут flex элементами.
grid См. здесь.

По умолчанию элементы могут иметь различные значения display.