Какие значения свойства display важны на практике и как их применять?

Свойство `display` задаёт, как элемент участвует в раскладке и как раскладываются его дети.

Основные значения

• `block` — с новой строки, на всю ширину: div, p.
• `inline` — в строке текста, без размеров: span, a.
• `inline-block` — в строке, но с размерами и отступами: кнопки, бейджи.
• `flex` / `inline-flex` — дети раскладываются по одной оси.
• `grid` / `inline-grid` — дети раскладываются по сетке.
• `none` — элемент не отображается и не занимает места.
• `contents` — сам блок исчезает, его дети участвуют в раскладке родителя (с осторожностью: может ломать доступность).
• `flow-root` — создаёт новый контекст форматирования: содержит float и не даёт margin выпадать наружу.
• `table`, `list-item` — табличная раскладка и элемент списка с маркером.

.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-block; padding: 2px 8px; }

Коротко для собеседования

Чаще всего нужны block, inline, inline-block, flex, grid и none; полезно знать flow-root и contents.

Подробнее: MDN — display