CSSボックスモデルとbox-sizingの違いを確かめる

widthを200pxにしたのに、画面ではそれより大きい。この原因を確かめるために、content・padding・border・marginの四つを分けて考えます。widthとheightは独立した層ではなく、大きさを指定するプロパティです。

CSSの読み込みから試す場合はHTMLとCSSの2ファイルで始める練習へ。以下は読み込まれたCSSによる幅の違いを調べます。

四つの領域
同じwidthで比較する
保存して比べる、幅の実験
DevToolsで確認する場所
余白の注意点
参考にした公式資料
次に読む記事

四つの領域

content：文字や画像が入る内容領域。
padding：内容から枠までの内側の余白。
border：枠線。
margin：枠の外側の余白。

外側から「margin → border → padding → content」という入れ子です。marginは背景色が塗られる領域には含まれません。

同じwidthで比較する

index.html（body内へ置くHTMLの断片）

<div class="box content-box">content-box</div>
<div class="box border-box">border-box</div>

断片を2ファイルで試す場合は、index.htmlのhead内に<link rel="stylesheet" href="style.css">を入れます。以下の単独で動く全体の例なら、style.cssは不要です。

style.css（上のHTMLと組み合わせるCSS）

.box { width: 200px; padding: 20px; border: 4px solid #175ea8; margin: 16px; }
.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

content-boxでは枠までの幅が200 + 20×2 + 4×2 = 248pxになります。border-boxでは枠までの幅が200pxに収まり、この例の内容領域は152pxです。外側のmarginは、どちらでもこの幅に含まれません。

border-boxでも、最小限必要なpaddingやborderより幅を小さくした場合などには単純な引き算だけでは説明できません。まずこの固定値の例で比較してから実際のレイアウトへ適用します。

保存して比べる、幅の実験

上の断片をどこへ置くか迷う場合は、次の全体を新しいindex.htmlに保存して開いてください。既存サイトのリセットCSSの影響を受けない、単独の練習です。

index.html（単独で動く全体の例・CSSはstyleタグ内）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>枠までの幅を比較</title>
  <style>
body { margin: 0; padding: 20px; font-family: sans-serif; line-height: 1.8; color: #17352e; }
.box { width: 200px; padding: 20px; border: 4px solid #175ea8; margin: 16px; background: #eef5fb; }
.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }
  </style>
</head>
<body>
<h1>同じwidth: 200pxを比較</h1>
<div class="box content-box">content-box</div>
<div class="box border-box">border-box</div>

</body>
</html>