Как display: inline и display: block влияют на layout?

Question

display: block заставляет элемент начинаться с новой строки и занимать всю доступную ширину. display: inline размещает элемент внутри строки текста. У блочных элементов работают width, height и вертикальные margin. У строчных — размеры зависят от контента. Это ключевое различие в CSS.

YeaHub · Accepted Answer

Свойство display определяет, как элемент участвует в построении layout страницы.display: blockБлочные элементы:начинаются с новой строкирастягиваются по ширине контейнераподдерживают width и heightкорректно обрабатывают все margin и paddingТипичные примеры — div, section, p.display: inlineСтрочные элементы:располагаются внутри строкине создают разрывов строкигнорируют width и heightне применяют вертикальные marginПримеры — span, a, strong.Влияние на layoutВыбор display напрямую влияет на:структуру документаповедение отступовперенос строкуправление размерами элементовПрактическое применениеЧасто используется комбинация:.element {
  display: inline-block;
}
Это позволяет сохранить строчное поведение и управлять размерами.Краткий выводdisplay: inline и display: block формируют принципиально разные модели layout и должны выбираться осознанно.