В чем разница между блочными, строчными и блочно-строчными элементами?

Продвинутые темы

Блочные, строчные и строчно-блочные элементы различаются тем, как они занимают место и реагируют на размеры (`display`).

Блочные (block)

Занимают всю доступную ширину, начинаются с новой строки.
Можно задавать width, height, вертикальные margin/padding.
Примеры: <div>, <p>, <h1>, <section>, <ul>.

Строчные (inline)

Занимают только ширину содержимого, идут в потоке текста (в строку).
width/height игнорируются; вертикальные margin/padding не сдвигают соседей (влияют только горизонтальные).
Примеры: <span>, <a>, <strong>, <em>, <img> (частично).

Строчно-блочные (inline-block)

Идут в строку (как inline), но при этом принимают `width`/`height` и вертикальные отступы (как block).
Примеры: кнопки, элементы меню — когда нужны размеры, но расположение в строку.

.tag { display: inline-block; width: 80px; height: 30px; }

Управление через display

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

Блочные (div, p) занимают всю ширину и переносятся, принимают размеры. Строчные (span, a) идут в строку по содержимому, игнорируют width/height. Строчно-блочные (inline-block) — в строку, но с размерами и вертикальными отступами. Тип задаёт display.