この記事の要点

CSS では全要素が長方形のボックスとして扱われる — これをボックスモデルと呼ぶ ボックスは内側から: content → padding → border → margin サイズ計算: box-sizing: content-box (デフォルト) と border-box で挙動が真逆 主要プロパティ: width / height / padding / margin / border / box-sizing / display / overflow モダン CSS では *{ box-sizing: border-box; } の全要素リセットがほぼ標準テクニック

CSS ボックスモデルとは

CSS では HTML のすべての要素が長方形のボックスとして表現されます。これをボックスモデルと呼び、ボックスは内側から以下の 4 層で構成されています。

層	役割
content	テキストや子要素が入る本体領域
padding	content と border の間の内側余白
border	ボックスの枠線
margin	border の外側、他のボックスとの外側余白

ボックス関連の主要プロパティ

プロパティ	役割
width / height	ボックスの幅 / 高さ
min-width / max-width	最小幅 / 最大幅
min-height / max-height	最小高さ / 最大高さ
padding	内側余白 (4 方向まとめ / 個別指定)
margin	外側余白 (4 方向まとめ / 個別指定)
border	枠線 (太さ / 線種 / 色)
box-sizing	サイズ計算方式 (content-box / border-box)
display	表示方式 (block / inline / flex / grid 等)
overflow	はみ出した内容の扱い (hidden / scroll 等)
box-shadow	影
border-radius	角丸

基本サンプル

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid #2563eb;
    margin: 10px;
    background: #f0f9ff;
    box-sizing: border-box;
}

box-sizing — サイズ計算方式

box-sizing はボックスの width / height がどこまでを含むかを決める超重要プロパティです。

値	width に含まれる範囲	実際の幅
content-box (初期値)	content のみ	width + padding + border
border-box	content + padding + border	width そのもの

/* content-box (デフォルト) */
.a {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid;
    /* 実際の幅: 200 + 20*2 + 2*2 = 244px */
}

/* border-box (直感的) */
.b {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid;
    /* 実際の幅: 200px ぴったり (content は 156px) */
}

/* モダン CSS の定番リセット */
*,
*::before,
*::after {
    box-sizing: border-box;
}

margin と padding の 4 方向指定

/* 1 値: 全方向 */
.a { padding: 10px; }

/* 2 値: 上下 / 左右 */
.b { padding: 10px 20px; }

/* 3 値: 上 / 左右 / 下 */
.c { padding: 10px 20px 30px; }

/* 4 値: 上 / 右 / 下 / 左 (時計回り) */
.d { padding: 10px 20px 30px 40px; }

/* 個別指定 */
.e {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

/* 論理プロパティ (推奨) */
.f {
    padding-block: 10px;   /* 上下 */
    padding-inline: 20px;  /* 左右 */
}

マージンの相殺 (Margin Collapse)

ブロック要素の垂直方向のマージンは隣接する要素と大きい方に統合される現象が起きます。初学者が引っかかる典型ポイント。

.a { margin-bottom: 30px; }
.b { margin-top: 50px; }

/* a の下と b の上は 80px ではなく 50px (大きい方) になる */

/* 相殺を防ぐ典型策 */
.parent {
    overflow: hidden;        /* BFC を形成 */
    /* または padding-top: 1px; / border-top: 1px solid transparent; */
}

/* Flexbox / Grid の子要素はマージン相殺が起きない */

display — 表示方式

値	性質
block	幅 100%、改行する。width/height/margin/padding 全て効く
inline	改行しない。width/height/上下 margin が効かない
inline-block	改行しないが width/height/margin/padding が効く
flex / grid	子要素を 1 次元 / 2 次元レイアウト
none	非表示 (領域も占有しない)

overflow — はみ出し制御

.a { overflow: visible; }   /* はみ出して表示 (デフォルト) */
.b { overflow: hidden; }    /* 切り取って非表示 */
.c { overflow: scroll; }    /* 常にスクロールバー */
.d { overflow: auto; }      /* 必要時のみスクロール (推奨) */

/* 横と縦を別指定 */
.e { overflow-x: hidden; overflow-y: auto; }

FAQ

Q: width 100% にしたら親をはみ出した
A: 子の padding/border が加算される (content-box) ため。box-sizing: border-box を指定するか、padding を親側で持つ。

Q: margin: auto で中央寄せできる条件
A: 水平方向のみかつ width が固定のブロック要素。垂直方向の auto は通常効かない (Flexbox なら margin: auto で 4 方向効く)。

Q: 古い IE のボックスモデル
A: IE6 以前の Quirks モードでは border-box 相当だった。これが現代の border-box 復権の遠因。

関連プロパティ

• サイズ: width / height / min-/max- / aspect-ratio
• 余白: margin / padding
• 枠: border / border-radius / outline
• 計算: box-sizing
• 装飾: box-shadow / background