В чем разница между margin и padding?

margin создает отступ снаружи элемента, вокруг его границы. Он не влияет на размер содержимого элемента.

padding создает отступ внутри элемента, между его границей и содержимым. Он увеличивает общий размер элемента (если box-sizing не установлен в border-box).

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black; /* Граница для наглядности */
  margin: 20px; /* Отступ снаружи элемента */
  padding: 10px; /* Отступ внутри элемента, между границей и содержимым */
}

Схематично:

[ Margin ]
  [ Border ]
    [ Padding ]
      [ Content ]
    [ Padding ]
  [ Border ]
[ Margin ]