CSS
margin・padding の違い
初級読み方：マージン・パディング のちがい｜英語：margin vs padding
marginは要素の「外側」の余白、paddingは要素の「内側」の余白。ボックスモデルの基本。
やさしい説明
marginは要素の外側の余白で、他の要素との間隔を作ります。paddingは要素の内側の余白で、内容と枠線の間を空けます。
プレゼントの箱に例えると、margin は「箱と箱の間のスペース」、padding は「箱の中の緩衝材（プチプチ）」です。
背景色は padding の範囲まで塗られますが、margin の範囲には塗られません。この違いを覚えておくと使い分けが簡単です。
図解：marginとpaddingの違い
具体例・使い方
/* margin: カード同士の間隔 */
.card { margin-bottom: 20px; }
/* padding: カード内側のゆとり */
.card { padding: 24px; }
/* 中央揃え（marginの特殊な使い方） */
.container { margin: 0 auto; }使い分けの判断基準
- 背景色・ボーダーを余白まで広げたい → padding（背景色はpadding範囲まで表示される）
- クリック範囲を広げたい → padding（paddingはクリック可能領域に含まれる）
- 他の要素との間隔を開けたい → margin
- 要素を中央揃えにしたい → margin: 0 auto
- ブラウザのデフォルト余白を消したい → margin: 0 / padding: 0
よく使うパターン
/* ボタン：クリック範囲を広げる → padding */
.btn {
padding: 10px 20px;
background: teal;
color: white;
}
/* カード一覧：カード間の間隔 → margin */
.card + .card {
margin-top: 16px;
}
/* セクション内側のゆとり → padding */
.section {
padding: 40px 20px;
}
/* コンテナを中央に → margin auto */
.container {
max-width: 800px;
margin: 0 auto;
}間違いやすいポイント
❌ 上下のmarginが相殺される（マージンコラプス）
上の要素の margin-bottom と下の要素の margin-top は合算されず、大きい方だけが適用されます。paddingにはこの問題はありません。FlexboxやGrid内の要素ではマージン相殺は発生しません。
❌ paddingで要素のサイズが意図せず広がる
デフォルトでは width: 200px に padding: 20px を加えると要素の幅が240pxになります。box-sizing: border-box を指定するとpaddingを含めた幅が200pxになり直感的に扱えます。
よくある疑問
Q: どちらを使えばいいか迷ったら？
A: 要素同士の間隔を空けたいならmargin、要素の中身と枠線の間を空けたいならpaddingです。
Q: marginに負の値は使える？
A: はい。負のmarginを使うと要素を重ねたり、はみ出させたりできます。paddingには負の値は使えません。
関連用語
📖 関連レッスン
レッスンを見る →