Чем margin отличается от padding в box-model?

Оба — отступы, но с разных сторон границы элемента (это и есть box-model):

• padding — внутренний отступ, между содержимым и рамкой (border). Это «обивка изнутри»: фон элемента её заполняет.
• margin — внешний отступ, между рамкой элемента и соседями. Это «личное пространство» снаружи, фон туда не заходит.

.box {
  padding: 20px;          /* воздух внутри, вокруг текста */
  border: 2px solid gray;
  margin: 30px;           /* расстояние до соседних блоков */
  background: #eef;
}

Порядок слоёв изнутри наружу: content → padding → border → margin.

Как выбрать:

• хотите, чтобы текст не прилипал к краям кнопки/карточки → padding;
• хотите развести два блока друг от друга → margin.

Две частые ловушки:

1. Схлопывание margin: вертикальные внешние отступы соседей не складываются, а берётся бо́льший из двух (margin 20px + 30px дадут зазор 30px, а не 50px). С padding такого нет.
2. По умолчанию padding увеличивает итоговую ширину блока — это лечится box-sizing: border-box.