marginとpaddingの違いが分からない

✅ 回答

どちらも余白を作りますが、余白の位置が違います。

段ボール箱で例えると

• padding = 箱の中の緩衝材（中身とフタの間のスペース）
• margin = 箱と箱の間のスペース（箱の外側）

ボックスモデルの構造

┌── margin（透明）──────────────┐
│ ┌── border ──────────────┐   │
│ │ ┌── padding（背景色）─┐ │   │
│ │ │   content          │ │   │
│ │ └────────────────────┘ │   │
│ └────────────────────────┘   │
└──────────────────────────────┘

コード例で確認

.box {
  background: lightblue;
  padding: 20px; /* ← 背景色が20px分広がる */
  margin: 30px;  /* ← 他の要素との間に30pxの透明な隙間 */
  border: 2px solid navy;
}

見分けるポイント

• 背景色は padding の範囲まで表示される
• marginは常に透明（背景色がつかない）
• 開発者ツールで要素を選択すると、padding は緑、margin はオレンジで表示される

まとめ：要素の内側に余白を作りたいなら padding、要素と要素の間に余白を作りたいなら margin を使いましょう。