В чем разница между display: block и display: inline?

Блочные элементы (display: block) занимают всю ширину и начинаются с новой строки, строчные (display: inline) идут в строку текста и занимают ширину по содержимому.

block

• Начинается с новой строки, растягивается на ширину родителя.
• Принимает width, height, все margin и padding.
• Примеры: div, p, h1, section, ul.

inline

• Встаёт в поток текста рядом с соседями.
• width и height игнорируются.
• Вертикальные margin не влияют на раскладку, вертикальный padding рисуется, но не раздвигает строки.
• Примеры: span, a, strong, em.

inline-block

Компромисс: стоит в строке, но принимает размеры и отступы, как блок — удобно для кнопок и бейджей.

.badge { display: inline-block; padding: 2px 8px; }

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

block — с новой строки, на всю ширину, принимает размеры; inline — в строке текста, размеры и вертикальные отступы не работают; inline-block — гибрид.

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