Свойство 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>
One
Two
Three

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

Свойство grid-gap

Определяет отступ между строками и столбцами grid сетки. <br>Сокращение для grid-row-gap и ...

Стили поля с неверными значениями, выходящими из заданного диапазона

Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазо...

Свойство border-right-color

Устанавливает цвет правой границы элемента.

Свойство transition-duration

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её заверше...

Правило @font-face

Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на...