Wat is het verschil tussen margin en 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 ]