CSS paddingとmarginの違いと使い分け｜初心者から現場エンジニアまで
「paddingとmargin、どちらを使えばいいの？」
私たちがWeb制作やフロントエンド開発の現場で、余白指定に迷った経験――きっと一度はあるはずです。
複数案件を担当する中で設計思想やコーディングルールが異なり、余白の指定方法で悩むことは多いですよね。
css box modelの理解不足やmargin collapseによるレイアウト崩れは、現場で頻発するトラブルの一つ。
本記事では、paddingとmarginの違いと使い分け、よくある失敗例、判断基準、ベストプラクティスまで、実務で役立つ知識を体系的に解説します。
コード例や図解を交え、余白設計のコツを一緒に身につけましょう。
paddingとmarginの違い
css box modelの基本
CSS box model（ボックスモデル）は、HTML要素がどのようにレイアウトされるかを決定する仕組みです。
各要素は「コンテンツ」「padding（内側の余白）」「border（枠線）」「margin（外側の余白）」の4層で構成されます。
- padding：コンテンツとborderの間の余白。背景色はpaddingまで広がります。
- margin：borderの外側の余白。他の要素との距離を調整します。背景色はmarginには適用されません。
この違いを理解することで、余白指定のミスやレイアウト崩れを防げます。
（CSS設計の保守性・拡張性については『CSS設計で保守性と拡張性を高める方法｜BEM・OOCSS・SMACSS徹底比較』をご参照ください）
余白の役割と種類
余白は、要素同士の見た目や操作性を左右する重要な設計要素です。
- paddingは、ボタンやカードなどの内部スペースを確保し、テキストやアイコンが窮屈にならないようにします。
- marginは、要素同士の間隔を調整し、レイアウト全体のバランスを取ります。
例えば、ボタンのテキストが枠に近すぎる場合はpaddingを、ボタン同士の間隔を広げたい場合はmarginを使います。
（CSS命名規則や設計パターンの違いについては『CSS命名規則を徹底比較！BEM・FLOCSS・Atomic CSSの選び方とは？』をご参照ください）
用語解説：CSS box model
HTML要素のレイアウトを決める枠組み。コンテンツ・padding・border・marginの4層で構成され、余白や枠線の扱いを明確にします。用語解説：padding
要素の内側の余白。コンテンツと枠線（border）の間にできるスペースで、背景色はpaddingまで広がります。用語解説：margin
要素の外側の余白。他の要素との距離を調整するスペースで、背景色はmarginには適用されません。用語解説：border
要素の周囲に描画される枠線。デザインや区切りに使われます。
使い分けの判断基準
どんな場面でpadding/marginを使うべきか
-
paddingを使う場面
- 要素内部の余白を調整したいとき（例：ボタン内のテキスト周り）
- 背景色や枠線を含めて余白を確保したいとき
-
marginを使う場面
- 要素同士の間隔を調整したいとき（例：リスト項目間のスペース）
- レイアウト全体のバランスを整えたいとき
判断フロー例
1. 余白を付けたい場所が「要素の内側」→padding
2. 余白を付けたい場所が「要素の外側」→margin
3. 背景色や枠線まで余白を広げたい→padding
4. 他要素との距離を調整したい→margin
margin collapseの注意点
margin collapse（マージンの重なり）は、隣接するブロック要素の上下marginが合算されず、大きい方だけが適用されるCSSの仕様です。
用語解説：margin collapse
隣接するブロック要素の上下marginが重なり、合算されずに大きい方だけが適用されるCSSの仕様。意図しない余白不足の原因になることも。
- 例：
<div>同士を縦に並べた場合、上下marginが重なる - 対策：paddingやborderを間に挟む、FlexboxやGridを使う
margin collapseを理解していないと、意図しないレイアウト崩れが発生します。
よくある失敗例と修正方法
コード例で学ぶ失敗と改善
ダメな例：margin collapseによるレイアウト崩れ
.div1 {
margin-bottom: 20px;
}
.div2 {
margin-top: 20px;
}
→上下marginが合算されず、20pxしか空かない
修正例：paddingで余白を調整
.div1 {
margin-bottom: 20px;
padding-bottom: 10px;
}
.div2 {
margin-top: 20px;
}
→paddingを追加することで、意図通りの余白を確保
ベストプラクティス：FlexboxやGridを活用
.container {
display: flex;
gap: 20px;
}
→gapプロパティで要素間の余白を安全に調整
ベストプラクティスと現場の設計思想
Flexbox・Gridでの余白調整
近年のCSS設計では、FlexboxやGridを使ったレイアウトが主流です。
- Flexbox：
gapプロパティで要素間の余白を簡単に調整可能。margin collapseの心配がありません。 - Grid：行・列ごとに余白を設定でき、複雑なレイアウトも柔軟に対応。
これらの手法を使うことで、余白設計のミスやレイアウト崩れを防げます。
（CSSレスポンシブ対応については『初心者向けCSSレスポンシブ解説｜2025年対応・サンプル付きでスマホ対応をマスター』をご参照ください）
用語解説：Flexbox
要素を柔軟に並べるためのCSSレイアウト手法。display: flex;で指定し、gapプロパティで要素間の余白を調整できます。用語解説：Grid
行・列を使って複雑なレイアウトを作れるCSSの仕組み。display: grid;で指定し、gapで余白を設定できます。用語解説：gap
FlexboxやGridで要素間の余白を一括指定できるプロパティ。margin collapseの心配がありません。
判断フローと設計思想
現場では「どこに余白を設けるべきか」「どのプロパティを使うべきか」を明確にする判断フローが重要です。
- 要素内部のスペース→padding
- 要素間のスペース→marginまたはgap
- margin collapseが起きる場面→Flexbox/Grid/gapで回避
設計思想としては「再利用性」「保守性」「一貫性」を重視し、余白指定はコンポーネント単位で統一するのが理想です。
FAQセクション
-
paddingとmarginの違いは？
paddingは内側の余白、marginは外側の余白です。 -
どちらを使えばレイアウト崩れを防げますか？
margin collapseを避けたい場合はpaddingやgapを活用しましょう。 -
margin collapseはなぜ起こる？
隣接するブロック要素の上下marginが合算されず、大きい方だけが適用されるCSS仕様です。 -
paddingとmarginを同時に使うとどうなる？
内外の余白が両方適用されますが、意図しない重なりに注意しましょう。 -
FlexboxやGridでは余白指定はどう変わる？
gapプロパティで要素間の余白を安全に調整できます。 -
実務でよくある失敗例は？
margin collapseによる余白不足、paddingの指定漏れなど。 -
余白設計の判断基準は？
内側ならpadding、外側ならmargin、複数要素ならgapを使うのが基本です。
まとめ
CSSのpaddingとmarginは、余白設計の基礎であり、正しく使い分けることでレイアウト崩れや意図しない表示を防げます。
css box modelの理解、margin collapseの注意点、FlexboxやGridの活用など、現場で役立つ知識を体系的に身につけることが重要です。
実務では「どこに余白を設けるべきか」「どのプロパティを使うべきか」を判断フローで整理し、設計思想に基づいて統一的に運用しましょう。
この記事が、あなたのCSS設計力向上と現場でのトラブル回避に役立つことを願っています。
ぜひコードをコピペして、まずは動かしてみてください。
