1. すべての要素は「箱（四角形）」である

ブラウザ上に表示されるHTML要素は、見出しタグであっても画像であっても、すべて四角い 「ボックス（Box）」 として処理されています。この四角形のサイズや余白を構成する構造モデルを「ボックスモデル」と呼びます。

ひとつのボックスは、内側から順に以下の4つのレイヤーで構成されています。

図：要素を包むボックスの4層構造（コンテンツ・パディング・ボーダー・マージン）

• コンテンツ領域（Content）: テキストや画像が実際に表示される中心部。width（幅）やheight（高さ）でサイズを指定します。
• パディング（Padding）: コンテンツ領域の外側、かつ境界線の「内側」にある余白。背景色はこの領域まで塗られます。
• ボーダー（Border）: パディングの外側を囲む「境界線（枠線）」。
• マージン（Margin）: ボーダーのさらに外側にある、他の要素との間隔を作る「外側の余白」。この領域は常に透明になります。

2. marginとpaddingの明確な使い分け

初心者にとって「どちらも余白を設定するプロパティ」に見えるため混乱しがちですが、以下のように境界線（Border）と背景色の関係から使い分けます。

3. レイアウト崩れを防ぐ box-sizing: border-box

デフォルトの設定では、要素の全体の横幅は width + 左右padding + 左右border という足し算で計算されてしまいます。例えば、幅300pxのボックスに左右paddingを20pxずつ足すと、全体の表示サイズは340pxに膨らんでしまい、横並びのデザインが崩れ落ちる原因になります。

これを防ぐために、プロのコーダーは必ず `box-sizing: border-box;` を指定します。これを書くことで、指定した width（例: 300px）の「内側」にpaddingとborderが自動的に収まるようになり、サイズ計算が極めてシンプルになります。

4. 余白と枠線を設定してみよう

以下のCSSを設定すると、内側のパディングによって背景の緑色の面積が広がり、外側のマージンによって他のカードと衝突するのを防ぎます。

* {
    box-sizing: border-box; /* 幅計算にpaddingやborderを含める */
}

.custom-card {
    width: 300px;
    background-color: #f0fdf4;
    border: 2px solid #10b981; /* 枠線: 太さ スタイル 色 */
    padding: 20px;             /* 枠線の内側に20pxの余白 */
    margin-bottom: 30px;       /* カードの下側に30pxの空き */
}

5. まとめと次回予告

第4回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

• ボックスモデルは、Content（中身）、Padding（内余白）、Border（枠線）、Margin（外余白）の4層構造。
• 背景の内側に余白を作るのは padding、他要素との間に空間を空けるのは margin。
• `box-sizing: border-box;` を指定することで、余白を追加しても全体の width が膨らまなくなる。

次回（第5回）は、要素のブロックとしての性質を切り替える「ディスプレイと配置の基本」をテーマに、block・inlineの違いやposition（相対・絶対配置）の仕組みを学びます。お楽しみに！