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 はオレンジで表示される

よく使うパターン

/* ボタンの内側に余白（クリック範囲を広げる） */
.button {
  padding: 12px 24px; /* 上下12px 左右24px */
}

/* カード同士の間隔を開ける */
.card {
  margin-bottom: 24px;
}

/* 中央揃え（左右のmarginをautoにする） */
.container {
  max-width: 800px;
  margin: 0 auto;
}

/* リセット：ブラウザのデフォルト余白を消す */
* {
  margin: 0;
  padding: 0;
}

marginの注意点：マージン相殺

上下方向の margin は隣り合う要素同士で「相殺（マージンコラプス）」が起きます。両方に margin: 20px を指定しても合計40pxにはならず、大きい方の20pxになります。

/* 上の要素 */
.top { margin-bottom: 20px; }

/* 下の要素 */
.bottom { margin-top: 30px; }

/* 2つの間の実際の余白は 30px（大きい方）になる */

この現象は上下（垂直方向）のみ起きます。左右（水平方向）の margin では起きません。

使い分けのまとめ

• クリック範囲・テキストの読みやすさを広げたい → padding
• 要素間のスペースを開けたい → margin
• 背景色やボーダーを余白まで広げたい → padding
• 要素を中央揃えにしたい → margin: 0 auto

まとめ：要素の内側に余白を作りたいなら padding、要素と要素の間に余白を作りたいなら margin を使いましょう。迷ったら開発者ツールで緑（padding）とオレンジ（margin）の色で確認するのが確実です。