Объясните на пальцах разницу между margin и padding — постоянно их путаю

Представь блок как подарок в коробке:

• padding — это набивка внутри коробки, между стенкой и подарком. Отодвигает содержимое (текст) от краёв самого блока. Фон блока эту зону закрашивает.
• margin — это пустое место снаружи коробки, отодвигает блок от соседних блоков. Прозрачное, фоном не закрашивается.

.box {
  padding: 20px;  /* воздух ВНУТРИ, текст отойдёт от краёв */
  margin: 30px;   /* воздух СНАРУЖИ, блок отойдёт от соседей */
  background: lightblue;
}

Короткая запоминалка: padding — внутренний отступ (от края блока до текста), margin — внешний (между блоками). Если фон должен закрашивать отступ — это padding.