Свойство display: block, inline, inline-block, none

Разбираем главное свойство, которое определяет, как элемент ведёт себя в потоке страницы.

display задаёт тип отображения элемента: занимает ли он всю строку, стоит ли в строке с другими и слушается ли размеров.

block — блочные элементы

Блочные элементы занимают всю доступную ширину и начинаются с новой строки. К ним относятся div, p, h1–h6, section. Им можно задавать ширину, высоту и любые отступы.

<div>Первый блок</div>
<div>Второй блок</div>

Эти два div встанут друг под другом, каждый на всю ширину — даже если текста в них мало.

inline — строчные элементы

Строчные элементы идут в строке, друг за другом, и занимают столько места, сколько нужно содержимому. Это span, a, strong, em. Важная особенность: у них не работают width, height и вертикальные margin — они подстраиваются под текст.

<span>Один</span> <span>два</span> <span>три</span>

Эти span выстроятся в одну строку: «Один два три». Задать им высоту не получится — для inline-элементов это бессмысленно.

inline-block — лучшее из двух миров

Гибрид: элемент стоит в строке рядом с другими (как inline), но при этом слушается width, height и всех отступов (как block).

.tag {
  display: inline-block;
  width: 100px;
  padding: 8px;
  background: #eee;
}

Несколько таких элементов встанут в ряд, но у каждого будет фиксированная ширина и отступы. Так раньше делали меню, кнопки-теги, карточки в ряд. Сегодня для рядов чаще берут Flexbox (следующий раздел), но inline-block по-прежнему полезен.

display: none — полностью скрыть

Значение none убирает элемент со страницы целиком: он не виден и не занимает места, словно его нет в разметке.

.hidden {
  display: none;
}

Это не то же самое, что visibility: hidden: тот делает элемент невидимым, но место под него остаётся пустым. А display: none убирает его без следа. Через JavaScript этим часто показывают и прячут меню, модальные окна, подсказки.

Сравнение

display	В строке?	width/height?	Занимает место?
`block`	нет (новая строка)	да	да
`inline`	да	нет	да
`inline-block`	да	да	да
`none`	—	—	нет

Свойство display — фундамент вёрстки. У него есть и значения flex и grid для современных раскладок — ими займёмся в следующем разделе.

Итог

block — на всю ширину с новой строки; inline — в строке, без width/height.
inline-block стоит в строке, но слушается размеров и отступов.
display: none убирает элемент полностью, не оставляя места (в отличие от visibility: hidden).