Свойство display

Одни элементы встают друг под другом, другие идут в строку, как слова в предложении. За это отвечает свойство display — тип отображения элемента. От него зависит, как элемент располагается и какие размеры на него действуют.

Блочные и строчные элементы

Блочные элементы — <div>, <p>, <h1>, <ul> — начинаются с новой строки и занимают всю ширину. Строчные — <span>, <a>, <strong> — встают внутри текста и занимают ровно столько места, сколько их содержимое:

<style>
  div { background: lightblue; }
  span { background: gold; }
</style>
 
<div>Блок</div>
<div>Ещё блок</div>
<span>Строчный</span> <span>и ещё один</span>

Фон показывает размеры: блоки растянулись во всю ширину, строчные элементы — только по тексту.

display: block и inline

Тип отображения можно поменять. display: block превращает ссылки в блоки — удобно для вертикального меню, где вся строка кликабельна:

<style>
  .menu a {
    display: block;
    padding: 6px;
    background: whitesmoke;
    margin-bottom: 4px;
  }
</style>
 
<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">Контакты</a>
</nav>

display: inline делает обратное: блоки выстраиваются в строку.

display: inline-block

inline-block — середина: элемент стоит в строке, как слово, но принимает ширину, высоту и вертикальные отступы, как блок:

<style>
  .tag {
    display: inline-block;
    width: 90px;
    padding: 6px;
    background: plum;
    text-align: center;
  }
</style>
 
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JS</span>

Так делают метки, плашки и простые кнопки.

Скрыть элемент

display: none убирает элемент полностью: его не видно, и место под него не остаётся. visibility: hidden прячет элемент, но место сохраняется:

<style>
  .none { display: none; }
  .hidden { visibility: hidden; }
</style>
 
<p>Первый абзац</p>
<p class="none">Этого абзаца нет</p>
<p class="hidden">Этот невидим, но занимает место</p>
<p>Последний абзац</p>

Между первым и последним абзацем — пустое место от невидимого элемента.

Значения display

Значение	Что делает
`block`	с новой строки, на всю ширину
`inline`	в строке, размеры по содержимому
`inline-block`	в строке, но с шириной и высотой
`none`	элемента нет на странице
`flex`, `grid`	контейнер для раскладки — следующая глава

Самые мощные значения — flex и grid: с ними строят раскладку страницы, и им посвящена глава о вёрстке.

Частая ошибка

У строчного элемента не работают width, height и вертикальные margin. Если размер не применяется, проверьте тип отображения:

<style>
  .box { width: 150px; height: 40px; background: lightgreen; }
  .fixed { display: inline-block; }
</style>
 
<span class="box">Размер не применился</span>
<br><br>
<span class="box fixed">А теперь 150 на 40</span>

Добавьте display: inline-block или block, и размеры заработают.

Спасибо, что читаете!