Чем отличается block от inline у элементов?

Коротко:

• block (div, p, h1, section) — занимает всю доступную ширину, всегда начинается с новой строки. Можно задавать width/height, верхние и нижние margin работают.
• inline (span, a, strong) — занимает столько места, сколько нужно содержимому, соседние inline-элементы встают в одну строку. width/height игнорируются, вертикальные отступы по сути не раздвигают строку.
• inline-block — компромисс: встаёт в строку как inline, но при этом слушается width/height и отступов как block. Удобно для кнопок и пунктов меню.

block — с новой строки и на всю ширину, inline — в общую строку по размеру контента. Вот и вся суть.

Представь block как кирпич (каждый на своей строке), а inline как слова в предложении (идут подряд). 😄