このレッスンを読み終えると、以下の3つを自信を持って扱えるようになります。

• ▸✅ Content / Padding / Border / Margin の4つの領域
• ▸✅ box-sizing: border-box が標準とされる理由
• ▸✅ Margin Collapsing の解決パターン

学習目標をチェックリストとして意識し、すべてに答えられるようになったらレッスンを閉じてください。

核心を一言で

HTMLのすべての要素は四角形のボックスとして描画されます。そのボックスは4層の同心構造: content - padding - border - margin。

        ┌─────── margin ───────┐
        │   ┌─── border ────┐   │
        │   │  ┌─ padding ─┐ │   │
        │   │  │ content  │ │   │
        │   │  └──────────┘ │   │
        │   └────────────────┘   │
        └────────────────────────┘

各領域の意味

• ▸content — 実際のコンテンツ（テキスト・画像）
• ▸padding — contentとborderの間の余白。内側のスペース
• ▸border — 枠線
• ▸margin — 他の要素との間隔。外側のスペース

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid gray;
    margin: 10px;
}

最も混乱しやすい点 — width の本当の意味

デフォルトの content-box では:

.card {
    width: 300px;      /* contentのみ 300 */
    padding: 20px;      /* 左右20ずつ = +40 */
    border: 2px;        /* 左右2ずつ = +4 */
}
/* 実際に占める幅: 300 + 40 + 4 = 344px */

width: 300px と書いたのに、実際には344px を占めます。直感に反しますね。

border-box — 直感的なアプローチ

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

.card {
    width: 300px;      /* borderを含めて300 */
    padding: 20px;     /* 含まれる */
    /* 実際に占める幅: ちょうど300px */
}

モダンCSSの標準 — すべてのプロジェクトは box-sizing: border-box から始まります。widthが本当のwidthになります。

margin の2つの落とし穴

1. 縦方向のmarginの結合 (collapsing):

<div style="margin-bottom: 30px;">A</div>
<div style="margin-top: 20px;">B</div>

縦方向のmarginは大きい値に統合されます。AとBの間は50pxではなく30px。

2. インライン要素には縦方向のmarginが効かない:

span { margin: 20px; }   /* 左右のみ適用、上下は無視される */

インライン要素（<span>・<a>）には上下のmarginが効きません。display: inline-block に変更する必要があります。

まとめ

• ▸すべての要素 = 4層のボックス (content・padding・border・margin)
• ▸box-sizing: border-box がモダンスタンダード
• ▸marginは外側の間隔、paddingは内側の余白
• ▸縦方向のmargin結合とインライン要素の制限に注意

このレッスンの概念を理解すれば、AIに具体的な指示を出せるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「このカードコンポーネントのpadding/marginをbox-sizing: border-boxベースで整理して」
• ▸「このレイアウトのcollapsing marginの問題を解決して」
• ▸「これらの要素がviewport全体に広がるようにheight: 100vh + overflowを設定して」

なぜこれがトークンを減らせるのか

概念を知らないままだと、AIの回答を受け取っても「それは何ですか?」と再度質問しなければなりません。その「再質問」がトークンを消費します。概念を一度しっかり学んでおけば、会話が一度で完結します。