Как блочные и строчные теги ведут себя в браузере?

Что проверяют

Понимаете ли вы, что поведение элемента задаёт CSS-свойство display, а не сам тег, и знаете ли, какие свойства на строчном элементе не работают. Следом обычно просят объяснить inline-block или откуда щель под картинкой.

Как отвечать

Деление тегов на блочные и строчные осталось от HTML 4. В HTML5 его заменили модели содержимого (flow content, phrasing content), а внешний вид задаёт display из стилей браузера по умолчанию: у div, p, section это block, у span, a, strong это inline.

• блочный: начинается с новой строки, при width: auto занимает всю ширину контейнера, принимает width, height и все отступы. Вертикальные margin соседних блоков схлопываются: 20px и 30px дают 30, а не 50;
• строчный: течёт внутри строки текста и переносится вместе с ней. width и height игнорируются, вертикальные margin не действуют, а вертикальные padding и border рисуются, но строку не раздвигают и наезжают на соседние строки;
• inline-block: стоит в строке, но принимает размеры и отступы как блок;
• замещаемые элементы: img, input, video по умолчанию строчные, но размеры у них работают, потому что содержимое приходит извне.

Две детали выделяют ответ. Строчные элементы выравниваются по базовой линии, поэтому под картинкой остаётся щель под выносные элементы букв; лечится display: block или vertical-align: middle. А пробелы и переносы в разметке между ними рендерятся как пробел, отсюда лишние пиксели между карточками на inline-block.

И ещё: дети flex- и grid-контейнера становятся блочными независимо от своего display.

Где спотыкаются

Задают width или margin-top на span и удивляются, что ничего не происходит.

Путают CSS и HTML. display: block на span меняет отрисовку, но не разрешает класть внутрь div: по модели содержимого это всё равно невалидно. А div внутри p парсер не допустит и закроет абзац раньше.

Говорят, что строчный элемент никогда не может содержать блочный. У a в HTML5 прозрачная модель содержимого, и ссылка может оборачивать целую карточку.