Блочная модель — это то, с чем сталкивается буквально каждый элемент на странице, даже если про неё никогда не задумываться. У любого блока есть содержимое, внутренние отступы вокруг него, граница и внешние отступы, которые отделяют блок от соседей. Вместе эти четыре слоя и определяют, сколько места элемент займёт на странице.
Padding — это пространство внутри блока, между содержимым и границей. Если задать кнопке padding, она станет визуально просторнее, но текст внутри останется на месте относительно содержимого — просто вокруг него появится воздух. Margin, наоборот, отступ снаружи, между границей текущего блока и соседними элементами.
Граница, border, добавляет к размеру элемента ещё и свою толщину, и вот тут начинается путаница у многих новичков: по умолчанию ширина блока, заданная через width, относится только к содержимому, а padding и border добавляются сверху. Из-за этого блок с width 200 пикселей и padding 20 пикселей с каждой стороны фактически занимает 240 пикселей.
Именно для решения этой путаницы существует свойство box-sizing со значением border-box — оно меняет логику расчёта так, что заданная ширина уже включает в себя padding и border. Многие CSS-сбросы включают border-box для всех элементов страницы по умолчанию именно по этой причине, и это заметно упрощает расчёты при вёрстке.
Margin между соседними блочными элементами по вертикали способен схлопываться — если у одного блока margin-bottom 20 пикселей, а у следующего margin-top 30, расстояние между ними будет не 50, а 30 пикселей, по большему из двух значений. Это поведение специфично именно для вертикальных внешних отступов и часто удивляет тех, кто впервые с ним сталкивается.
Подробное визуальное объяснение всех четырёх слоёв блочной модели и особенностей схлопывания отступов есть в статье про блочную модель на MDN.
