Свойство CSS display
Свойство display — одно из самых важных свойств для управления макетом. Оно определяет, обрабатывается ли элемент как блочный или строчный.
Каждый элемент имеет значение display по умолчанию, основанное на его типе, обычно block или inline. Свойство display позволяет изменить это поведение по умолчанию.
Блочные элементы
Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину.
<div> — блочный элемент. Другие примеры включают <h1>–<h6>, <p>, <form>, <header>, <footer> и <section>.
Строчные элементы
Строчный элемент не начинается с новой строки и занимает только столько ширины, сколько ему нужно.
Примеры строчных элементов включают <span>, <a> и <img>.
Значения Display
У свойства display много значений. Наиболее распространённые:
inline— отображает элемент как строчный.block— отображает элемент как блочный.contents— заставляет контейнер исчезнуть, так что его дочерние элементы поднимаются на уровень выше в DOM.flex— отображает элемент как блочный flex-контейнер.grid— отображает элемент как блочный grid-контейнер.inline-block— форматирует элемент как строчный, но позволяет задавать высоту, ширину, отступы и поля.none— полностью скрывает элемент, так что он не занимает места.
Переопределение значения display по умолчанию
Свойство display изменяет поведение элемента по умолчанию. Изменение строчного элемента на блочный или наоборот может помочь странице выглядеть так, как вы хотите, при сохранении соответствия веб-стандартам.
Примечание: Установка display изменяет только то, как отображается элемент, а не то, каким элементом он является. Так, строчный элемент с display: block всё равно не может содержать другие блочные элементы.
Span как блок
Строчные элементы <span> отображаются как блочные элементы, каждый на своей строке.
<style> установите span { display: block; }. Добавьте несколько элементов <span>, чтобы каждый появлялся на своей строке вместо строчного отображения.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>A span element displayed as a block.</span>
<span>Another span element on its own line.</span>
<span>A third span element on its own line.</span>
</body>
</html>
Ссылка как блок
Строчные элементы <a> отображаются как блочные элементы, каждый на своей строке.
<style> установите a { display: block; }. Добавьте несколько ссылок <a>, чтобы каждая появлялась на своей строке.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
display: block;
}
</style>
</head>
<body>
<a href="https://prompt-cookbook.com">Link one</a>
<a href="https://prompt-cookbook.com">Link two</a>
<a href="https://prompt-cookbook.com">Link three</a>
</body>
</html>
Пример с несколькими значениями display
Вы можете применять к элементам несколько разных значений display.
Пример
Шесть абзацев используют none, inline, block, inline-block, flex и grid.
<style> создайте шесть классов абзацев: ex1 none, ex2 inline, ex3 block, ex4 inline-block, ex5 flex, ex6 grid. Добавьте подписанный абзац для каждого, чтобы были видны разные варианты отображения (абзац "none" будет скрыт).
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
</style>
</head>
<body>
<p class="ex1">display: none (this paragraph is hidden).</p>
<p class="ex2">display: inline.</p>
<p class="ex3">display: block.</p>
<p class="ex4">display: inline-block.</p>
<p class="ex5">display: flex.</p>
<p class="ex6">display: grid.</p>
</body>
</html>