CSSのボックスモデルとは？content・padding・border・marginの仕組みを初心者向けに解説

Webページの余白を調整したときに、「width: 240px;と書いたのに、実際は240pxより広い」「marginとpaddingのどちらを使えばよいか分からない」と迷うことがあります。原因を整理する鍵が、CSSのボックスモデルです。

幅や余白のずれを直すには、どの範囲の大きさを指定しているのかを分けて考えます。見えている箱の幅と、その外側に必要な間隔を区別すると、変更する値を選びやすくなります。

この記事では、4層の仕組みを図解で確認したあと、練習用カードの幅を計算し、ブラウザーで確かめる流れを紹介します。自分の症状に合う確認先を選べるところまで進めましょう。「プロパティ: 値;」というCSSの基本形がまだ曖昧な場合は、先にCSSの基本的な書き方を確認すると読み進めやすくなります。

CSSのボックスモデルとは

CSSのボックスモデルとは、HTML要素を四角い箱として捉え、その大きさと余白を計算する仕組みです。段落、見出し、画像、ボタン、カードなど、多くの要素に関係します。

箱の中心には文章や画像が入り、その周囲へ内側余白、枠線、外側余白が重なります。内側からcontent→padding→border→marginの順です。

4層の順番を一つの箱として理解することが、幅や余白のずれを直す出発点です。MDNのボックスモデルの解説でも、コンテンツ・パディング・境界・マージンの関係が説明されています。

ここでは、まず<div>や<p>のように、通常は前後で改行して縦に並ぶ「ブロック要素」で確認します。幅・高さと4層の関係を追いやすいためです。文章の途中に並ぶ<span>や<a>を「インライン」として表示した場合は、幅・高さや上下の余白の効き方が異なります。画像の<img>は、画像データを表示する「置換要素」であり、インライン表示でも幅や高さを指定できます。

content・padding・border・marginの役割

4層はすべて「余白」ではありません。それぞれ担当が違います。

層	役割	主なCSS
content	文章や画像を表示する領域	width・height （content-boxの場合）
padding	内容と枠線の間に作る内側余白	padding
border	内容と内側余白を囲む枠線	border
margin	要素の外側に作る間隔	margin

W3CのCSS Box Model Module Level 3では、各ボックスにcontent領域があり、その周囲へpadding、border、marginの領域が置かれると定義されています。

content（内容の領域）

content（コンテント）は、文章、画像、子要素などの内容が入る中心部分です。初期値のcontent-boxでは、widthとheightがcontent領域の幅と高さを表します。

.box {
  box-sizing: content-box;
  width: 240px;
  height: 120px;
}

この例では、contentの幅が240px、高さが120pxです。計算方法をそろえるため、box-sizing: content-box;も明示しています。paddingやborderを追加すると、表示される箱がその分だけ外側へ広がります。

padding（内側の余白）

padding（パディング）は、contentとborderの間に作る内側余白です。文章を枠線から離したり、ボタンの押せる領域を広げたりするときに使います。

.box {
  padding: 24px;
}

padding: 24px;は、上下左右すべてに24pxの内側余白を指定します。背景色は通常、contentだけでなくpaddingの領域にも描かれます。

border（枠線）

border（ボーダー）は、contentとpaddingを囲む枠線です。太さ、線の種類、色をまとめて指定できます。

.box {
  border: 4px solid #536048;
}

この例は、4pxの実線を濃い緑色で表示します。borderは見た目だけでなく、content-boxでは指定した幅と高さの外側へ加わります。

margin（外側の間隔）

margin（マージン）は、borderより外側に作る間隔です。隣り合うカード同士や、見出しと段落の距離を空けるときに使います。

.box {
  margin: 16px;
}

margin: 16px;は、要素の外側の上下左右へ16pxの間隔を指定します。marginの領域には、要素の背景色や枠線は描かれません。見えている空白は、要素の外側に作られた間隔です。

内容と枠線の間を空けるのがpadding、要素同士を離すのがmarginです。両者を「余白」とだけ覚えず、borderの内側か外側かで区別してください。

widthとheightはどこまでの大きさか

CSSの初期値では、box-sizingはcontent-boxです。この状態で指定したwidthとheightは、contentだけの大きさを表します。

ただし、初期値と、そのページで実際に適用される値は同じとは限りません。テーマやリセットCSSでborder-boxが指定されていたり、一部のフォーム部品などにブラウザー側の設定があったりします。以下は通常のブロック要素にcontent-boxを明示した例です。Flexboxによる縮小など、別のレイアウト調整が入る例とは分けて考えます。

content-boxで指定したwidthには、左右のpaddingとborderが含まれません。そのため、次のボックスは表示幅が240pxより広くなります。

.box {
  box-sizing: content-box;
  width: 240px;
  padding: 24px;
  border: 4px solid #536048;
  margin: 16px;
}

borderの外端までの幅は、次の式で計算します。

240px + 24px + 24px + 4px + 4px = 296px

borderの外端までの表示幅は296pxです。さらに左右のmarginを含め、周囲のレイアウト上で必要になる横方向の空間を考えると、次のようになります。

296px + 16px + 16px = 328px

この例では、要素を配置するために横方向へ328px分の空間が必要です。要素そのものの幅は296pxで、その左右に16pxずつmarginがあると分けて考えます。

高さも同じ考え方です。content-boxでは、指定したheightへ上下のpaddingとborderが加わり、marginはその外側の間隔になります。

pxや%など単位の基準が曖昧な場合は、CSSの単位の違いと使い分けもあわせて確認してください。

box-sizingの指定方法

box-sizingは、CSSで指定したwidth・heightの中に、paddingとborderを含めるかを決めるプロパティです。主にcontent-boxとborder-boxを使います。

content-boxとborder-boxの違い

値	widthに含む範囲	この例の表示幅
content-box	contentのみ	296px
border-box	content＋padding＋border	240px

content-boxは初期値です。width: 240px;をcontentの幅として扱うため、paddingとborderが外側へ加わります。

border-boxを指定すると、paddingとborderをwidthの内側へ含めます。

.box {
  box-sizing: border-box;
  width: 240px;
  padding: 24px;
  border: 4px solid #536048;
}

この場合、borderの外端までが240pxです。contentの幅は、240pxから左右のpadding 48pxと左右のborder 8pxを引いた184pxになります。

border-boxへ変えても、marginは指定したwidthの外側です。MDNのbox-sizingリファレンスでも、border-boxはcontent・padding・borderを含み、marginは含まないと説明されています。

新しく作る練習用ページなどで計算方法をそろえたい場合は、次のように全要素と疑似要素へ指定する方法があります。

*,
*::before,
*::after {
  box-sizing: border-box;
}

*はすべての要素を選ぶセレクターです。::beforeと::afterは、要素の前後へ装飾などを作る「疑似要素」です。この指定は実務でよく使われます。ただし、既存テーマや外部部品へ追加すると見た目が変わる可能性があります。既存サイトでは、すでに同じ指定があるかを確認してから追加してください。

marginとpaddingの使い分け

marginとpaddingは、borderを基準に判断します。

• 枠線の内側で、内容の周囲を空けたい：padding
• 枠線の外側で、別の要素との距離を空けたい：margin

paddingで内側の余白を調整する

ボタンの文字と縁を離したい場合は、paddingを使います。

.button {
  display: inline-block;
  padding: 12px 20px;
  border: 2px solid #536048;
  background-color: #f2d89c;
}

paddingへ2つの値を書くと、1つ目が上下、2つ目が左右へ適用されます。この例では上下12px、左右20pxです。

背景色は通常、paddingの領域まで広がります。リンクをボタンとして表示する場合、paddingを加えると背景とクリックできる領域も広げられます。一方、marginは要素の外側なので、そのボタンの背景やクリック領域にはなりません。

marginで要素同士の間隔を調整する

カードと次のカードの距離を空けたい場合は、marginを使えます。

.card {
  margin-bottom: 24px;
}

ただし、通常のブロックレイアウトでは、上下に隣接するmarginが足し算されず、一つにまとまる場合があります。これを「マージンの相殺」と呼びます。

.first {
  margin-bottom: 24px;
}

.second {
  margin-top: 16px;
}

通常のブロックレイアウトでこの2要素が上下に隣接し、間に相殺を妨げる条件がなければ、間隔は24px＋16px＝40pxではなく24pxになります。このように両方が正の値なら大きい方が使われます。上下のmarginは、条件によって相殺されます。詳しい発生条件はMDNのマージンの相殺の解説で確認できます。

FlexboxやGridの子要素同士では、このmarginの相殺は起きません。間隔の指定には、marginではなくgapを使う方法もあります。間隔を親側で一括管理でき、子要素ごとの最後のmarginを消す処理も減らせます。

カードでボックスモデルを試す

ここまでと同じ、幅240px・padding 24px・border 4px・margin 16pxのカードを試します。用意するものは、テキストエディターとブラウザーです。次のコード全体をindex.htmlとしてUTF-8で保存し、ブラウザーで開いてください。既存サイトへ追加せず、独立した練習用ファイルで確認できます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ボックスモデルの練習</title>
  <style>
    .box-card {
      box-sizing: content-box;
      width: 240px;
      margin: 16px;
      padding: 24px;
      border: 4px solid #536048;
      background-color: #fefefc;
    }
    .box-card h2 { margin-top: 0; }
    .box-card p { margin-bottom: 0; }
  </style>
</head>
<body>
  <article class="box-card">
    <h2>ボックスモデル</h2>
    <p>contentの周囲へpadding・border・marginが重なります。</p>
  </article>
</body>
</html>

CSSは<head>内の<style>、表示するHTMLは<body>内に置いています。保存形式がindex.html.txtにならないよう、拡張子も確認してください。

最初はborderの外端まで296pxです。次にbox-sizing: content-box;だけをbox-sizing: border-box;へ変更して保存し、ブラウザーを再読み込みします。表示幅が240pxへ縮まり、contentが184pxになれば、前の図解と同じ結果です。数値の確認方法は次の「開発者ツール」の章で説明します。

.box-cardがスタイルを適用する対象です。classセレクターの仕組みを確認したい場合は、CSSセレクタの要素・class・idの違いを参考にしてください。

親幅に合わせるカードへ応用する

この応用は任意です。先に次の「開発者ツール」の章で296pxと240pxの違いを確認してから、.box-cardの指定を次の形へ置き換えてみましょう。ここからは固定幅240pxの計算例を離れ、親要素の幅に合わせつつ、大きくなりすぎないカードにします。

.box-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 36rem;
  margin: 24px auto;
  padding: 24px;
  border: 4px solid #536048;
  background-color: #fefefc;
}

max-width: 36rem;は幅の上限です。remはルート要素htmlの文字サイズを基準とする単位で、16pxなら36remは576pxになります。見出しと段落のmarginを調整する2つのルールは残してください。保存して再読み込みし、ブラウザーの幅を狭めたり広げたりすると、親幅に収まりながら上限で止まることを確認できます。

応用例では、次のように役割を分けています。

• width：カードのborder外端までの横幅
• margin：カードの外側の上下間隔と左右中央寄せ
• padding：カード内の文章と枠線の間隔
• border：カードを囲む枠線
• background-color：contentとpaddingの背景

margin: 24px auto;は、上下を24px、左右をautoにします。カードが親要素より狭いとき、左右の余った空間が均等に分配されるため中央に配置できます。

h2の上marginとpの下marginを0にしているのは、カードのpaddingに、ブラウザーが見出しや段落へ最初から付けるmarginまで加わり、内側が想定より広く見えるのを防ぐためです。

開発者ツールでボックスモデルを確認する

計算に迷ったら、ブラウザーの開発者ツールで実際の値を確認できます。まず固定幅240pxの練習用カードで確認しましょう。PC版Chromeでは次の流れです。

Chrome公式のCSSを表示・変更する手順では、ボックスモデル図に表示された幅、高さ、padding、margin、borderを確認・変更する方法が案内されています。

開発者ツールでは、推測ではなく計算後の実際の値を確認できます。paddingへカーソルを合わせるとページ上の該当領域が強調されるため、どの余白を見ているかも判断しやすくなります。

開発者ツールの位置や名称は、Chromeのバージョン、表示言語、パネル幅で変わることがあります。見た目を丸暗記せず、Elementsで対象要素を選び、StylesまたはComputedで計算後の値を見る流れを覚えてください。ボックスモデル図の中央の幅はcontentの幅なので、borderまでの幅を知りたい場合は左右のpaddingとborderを足します。

開発者ツールのStyles欄で数値を変えると、その場で表示を試せます。ただし、通常の一時編集では元のHTML・CSSファイルへ保存されず、ページを再読み込みすると戻ります。採用したい値は、テキストエディターで練習用ファイルへ書き戻して保存してください。

サイズや余白の症状別の確認方法

表示が想定と違う場合は、まず開発者ツールで対象要素を選びます。そのうえで、当てはまる症状の項目を確認してください。

• CSSの変更が反映されない：Stylesに書いたセレクターのルールがあるか確認する。表示されなければ、選んだ要素のclass名とCSSの指定先を照合する
• 指定したwidthより箱が広い：box-sizingを確認する。content-boxなら左右のpaddingとborderを足す。この記事の例は240＋48＋8＝296pxになる
• width: 100%で親からはみ出す：paddingとborderが指定幅へ加算されていないか確認する。border-boxへ変えてもはみ出す場合は、左右marginも別に確認する
• 測った幅と計算が合わない：borderの外端までか、marginまで含めた空間かをそろえる。この記事の例では296pxと328pxを区別する
• 上下の間隔が足し算にならない：通常のブロックレイアウトならmarginの相殺を確認する。隣接する正のmarginが24pxと16pxなら、条件を満たすと間隔は24pxになる
• 文章中のリンクなどに幅・高さが効かない：spanやaのdisplayを確認する。inlineなら、幅・高さも指定できるinline-blockが目的に合うか検討する

修正後の幅や間隔が期待どおりになったら、その症状の確認は終了です。残りの項目まで一律に変更する必要はありません。練習用カードなら296pxから240pxへの変化と、内側24px・枠線4pxが保たれることを確認します。別の症状が残った場合だけ、対応する項目へ進んでください。

また、padding: -10px;のような負のpaddingは無効です。無効な宣言だけが無視され、CSS全体が無効になるわけではありません。ほかに適用できるpadding指定があればそちらが使われ、なければ初期値の0になります。marginには負の値を指定できますが、要素を重ねたり通常位置から引き寄せたりするため、初心者のうちは原因を説明できる場面に限定してください。

よくある質問

marginとpaddingは同じ見た目ならどちらでもよいですか？

同じように空いて見えても役割が違います。背景色・border・クリック領域の内側を広げるならpadding、別要素との外側の間隔ならmarginを使います。後から背景色や枠線を追加したときに違いが明確になります。

border-boxにするとmarginもwidthへ含まれますか？

含まれません。border-boxのwidthに含まれるのはcontent、左右padding、左右borderです。marginはborderの外側に残ります。

width: 100%とpaddingを一緒に使うとはみ出しますか？

初期値のcontent-boxでは、100%のcontent幅へ左右paddingとborderが加わるため、親要素より広くなることがあります。box-sizing: border-box;を指定すると、paddingとborderを100%の内側へ含められます。ただし左右marginは別です。また、paddingとborderの合計より親幅が狭い場合は、border-boxでも収まりません。

paddingにマイナスの値は使えますか？

使えません。負のpaddingは無効な指定として適用されません。marginには負の値を指定できますが、レイアウトが重なりやすいため、通常の間隔調整では正の値やgapから検討します。

画像にもボックスモデルは適用されますか？

適用されます。画像は置換要素なので、インライン表示でも幅・高さに加えてpadding、border、marginを指定できます。画像が親幅を超える場合は、max-width: 100%;とbox-sizing: border-box;を確認し、親要素のpaddingや画像自身のborderも含めて調べてください。

まとめ

CSSのボックスモデルは、要素をcontent、padding、border、marginの4層で捉える仕組みです。

• contentは文章や画像が入る中心領域
• paddingはcontentとborderの間の内側余白
• borderはcontentとpaddingを囲む枠線
• marginはborderの外側に作る間隔
• 初期値のcontent-boxでは、paddingとborderが指定幅へ加わる
• border-boxでは、content・padding・borderを指定幅へ含める

まず、この記事の練習用カードを開発者ツールで選び、4層の数値を確認してみてください。次にbox-sizingを切り替え、同じwidthでも表示幅が変わることを試すと、計算の仕組みを実感できます。

目的別に次の記事を選ぶ

ボックスの幅と余白が分かったら、次に確かめたい内容から読み進めてください。

文章中のリンクなどに幅や高さが効かない場合は、displayの違いと使い分けを確認できます。

親幅に収める方法や、高さをどこまで固定するかで迷う場合は、width・heightと上限・下限の指定を確認できます。