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

Margin — это внешний отступ элемента, создающий пространство за пределами его границы. Padding — внутренний отступ, увеличивающий расстояние между содержимым и границей элемента.

Пример:

.box {
  margin: 20px; /* Отступ снаружи */
  padding: 10px; /* Отступ внутри */
  border: 1px solid black;
}

Ключевые отличия:

1. Margin влияет на расстояние между элементами, padding — на внутреннее пространство.
2. Margin может иметь отрицательные значения, padding — нет.
3. Margin схлопывается (у соседних элементов отступы объединяются), padding — нет.
4. Padding учитывается в размерах элемента при box-sizing: content-box (по умолчанию).