Чем отличается display: block от display: inline?

Основное различие между display: block и display: inline

В CSS каждому элементу можно задать тип отображения через свойство display. Два самых базовых значения — block и inline — определяют, как элемент ведёт себя в потоке документа.

Блочные элементы (block)

Элемент с display: block занимает всю доступную ширину родительского контейнера, если не задана явная ширина. Он всегда начинается с новой строки, а следующий за ним элемент также будет на новой строке. Блочные элементы поддерживают все свойства box model: width, height, margin, padding (работают со всех сторон).

<div style="display: block; width: 200px; margin: 10px;">Блок 1</div>
<div style="display: block;">Блок 2</div>

Строчные элементы (inline)

Элемент с display: inline не переносит строку — он располагается в одной строке с соседними строчными элементами. Его ширина и высота определяются содержимым, а свойства width и height игнорируются. Вертикальные margin и padding не влияют на соседние элементы, хотя padding визуально может выходить за границы.

<span style="display: inline; padding: 5px;">Текст 1</span>
<span style="display: inline;">Текст 2</span>

Практическое применение

Блочные элементы (div, p, h1-h6) используются для структуры страницы — заголовков, абзацев, секций. Строчные (span, a, strong) применяются для форматирования текста внутри строки. Если нужно совместить свойства обоих типов, используют display: inline-block.

Вывод: Понимание разницы между block и inline необходимо для корректной вёрстки и управления потоком документа. Используйте block для крупных структурных блоков, inline — для оформления текста внутри строки.