Свойство display

Описание

Определяет, как элемент должен быть показан в документе.

Синтаксис

display: block | inline | inline-block | inline-table | inline-flex | flex | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group;

Подробности

Значение	Описание
block	Элемент становится блочным. Применение этого значения для строчных элементов, заставляет его вести как блоки — происходит перенос строк в начале и в конце содержимого.
inline	Элемент становится строчным. Использование блочных элементов, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block	Создает блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Элемент похож на встраиваемые элементы (вроде img). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table	Указывает, что элемент является таблицей, как при использовании table, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
inline-flex	Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс - модели.
flex	Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс - модели.
grid	Элемент ведет себя как блочный и выкладывает содержимое согласно грид - модели.
list-item	Элемент становится блочным и добавляется маркер списка.
none	Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб - страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
table	Определяет, что элемент является блочной таблицей, подобно использованию table.
table-caption	Задаёт заголовок таблицы, подобно применению caption
table-cell	Указывает, что элемент представляет собой ячейку таблицы.
table-column	Назначает элемент колонкой таблицы, словно был добавлен col.
table-column-group	Указывает, что элемент является группой одной или более колонок таблицы, как при использовании colgroup
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой tfoot.
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой thead.
table-row	Элемент отображается как строка таблицы.
table-row-group	Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию tbody.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test {
width: 300px;
padding: 10px;
background-color: #97dfc8;
border: 3px dashed rgb(0, 92, 252);
display: flex;
}
.child {
border: 3px solid black;
width: 35%;
padding: 10px;
background-color: rgba(225, 255, 0, 0.478);
}
</style>
<div id='test'>
<div class='child'>One</div>
<div class='child'>Two</div>
<div class='child'>Three</div>
</div>
</body>
</html>

Описание

Синтаксис

Подробности

Пример

Читайте также

Стиль элемента при наведении на него курсора мыши

Стиль последнего элемента определённого типа

Свойство margin-top

Свойство tab-size