CSS marginとpaddingの違い【ボックスモデル解説】

ボックスモデルとは？

CSSでは、すべての要素が「箱（ボックス）」として扱われます。この箱は4つの層で構成されています。

• content：テキストや画像などの内容
• padding：内容と枠線の間の余白（内側）
• border：枠線
• margin：枠線の外側の余白（外側）

この4層構造をボックスモデルと呼びます。CSSレイアウトの基礎中の基礎です。

身近なもので例えると、プレゼントの箱を想像してください。中身がcontent、中身を守るクッション材がpadding、箱そのものがborder、箱と箱の間のスペースがmarginです。この4つの関係を理解すれば、CSSのレイアウトで迷うことが減ります。

ブラウザの開発者ツール（F12キー）を使うと、実際のボックスモデルを色分けで確認できます。余白の問題で困ったときは、まず開発者ツールで確認する習慣をつけましょう。

marginとpaddingの違い

margin = 外側の余白

要素の外側に空間を作ります。隣の要素との距離を調整するときに使います。背景色は適用されません。

.card {
  margin: 16px; /* 外側に16pxの余白 */
}

padding = 内側の余白

要素の内側（内容と枠線の間）に空間を作ります。テキストが枠線にくっつかないようにするときに使います。背景色が適用されます。

.card {
  padding: 20px; /* 内側に20pxの余白 */
  background: white; /* paddingの範囲にも背景色が適用 */
}

図解で理解する

ボタンを例にすると：paddingはボタンの文字と枠の間の余白、marginはボタンと隣のボタンの間の余白です。paddingを増やすとボタンが大きくなり、marginを増やすとボタン同士が離れます。

💡 CSS入門ガイドでCSSの基本を確認できます。

値の指定方法

1つの値（全方向同じ）

margin: 16px; /* 上下左右すべて16px */

2つの値（上下 / 左右）

padding: 12px 24px; /* 上下12px、左右24px */

4つの値（上 右 下 左）

margin: 10px 20px 30px 40px; /* 上10 右20 下30 左40 */
/* 時計回り（上→右→下→左）で覚える */

auto（中央揃え）

margin: 0 auto; でブロック要素を水平中央に配置できます。

.container {
  max-width: 800px;
  margin: 0 auto; /* 左右のmarginを自動計算 → 中央揃え */
}

margin: autoが効くには条件があります。要素がブロック要素であること、widthまたはmax-widthが指定されていることです。インライン要素やwidth未指定の要素にはautoが効きません。もし中央揃えにならないときは、この2つを確認しましょう。

marginの相殺（マージンの崩壊）

隣接する要素のmarginが重なる現象

上下に並んだ要素のmarginは、大きい方の値だけが適用されます（足し算にならない）。これをマージンの相殺と呼びます。

/* h2のmargin-bottom: 20px、pのmargin-top: 16px */
/* → 間の余白は20px（大きい方）になる。36pxにはならない */
h2 { margin-bottom: 20px; }
p { margin-top: 16px; }

回避方法

• paddingを使う（paddingは相殺されない）
• 親要素に overflow: hidden を指定する
• FlexboxやGridを使う（相殺が起きない）

マージンの相殺は上下方向でのみ起きます。左右のmarginは相殺されません。また、親子間でも相殺が起きることがあります。親要素にpaddingやborderがない場合、子要素のmargin-topが親の外に飛び出すことがあります。

この現象を知らないと「なぜ余白が思い通りにならないのか」と悩みます。困ったときは、親にpadding: 1pxを付けるだけで解決することもあります。

実践例

カードの余白設計

.card {
  padding: 24px;       /* 内側の余白（テキストと枠の間） */
  margin-bottom: 16px; /* カード同士の間隔 */
  border-radius: 8px;
  background: white;
}

セクション間のスペース

section {
  padding: 40px 20px;  /* セクション内の余白 */
  margin-bottom: 60px; /* セクション間の距離 */
}

📖 positionプロパティと組み合わせたレイアウトも学びましょう。

レスポンシブな余白設計

画面サイズに応じて余白を変えると、スマホでもPCでも読みやすいデザインになります。clamp()関数を使うと、最小値と最大値の間で自動的に余白が変わります。

section {
  padding: clamp(20px, 5vw, 60px);
}

この書き方なら、画面幅が狭いときは20px、広いときは60pxの余白になります。メディアクエリを何本も書く必要がなくなります。

box-sizing: border-box

デフォルトでは、width に padding と border の幅が加算されます。box-sizing: border-box を指定すると、padding と border を含めた幅が width になります。

/* 全要素に適用するのが定番 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* width: 300px の中に padding: 20px が含まれる */
.box {
  width: 300px;
  padding: 20px;
  /* 実際の内容幅 = 300 - 20*2 = 260px */
}

border-boxを指定しないと、width: 300pxの要素にpadding: 20pxを付けたとき、実際の幅は340pxになります。これが「paddingが幅に加算される」問題です。レイアウトが崩れる原因の多くがこれです。

現代のCSSでは、リセットCSSの冒頭でbox-sizing: border-boxを全要素に適用するのが標準的です。新しいプロジェクトを始めるときは、最初にこの設定を入れましょう。

🔗 最初のCSSで基礎を固めましょう。

まとめ

余白の使い方ひとつでデザインの印象は大きく変わります。迷ったら開発者ツールで確認しながら調整しましょう。