HTMLの全ての要素（特にブロックレベル要素）は、以下の図のような「4つの層」から成る箱として扱われます。
| 名称 | 役割 | 背景色の影響 |
|---|---|---|
| margin | ボーダーの外側の余白。隣の要素との距離。 | 透明になる |
| border | コンテンツと余白を囲む境界線。 | 独自の色を指定可 |
| padding | ボーダーとコンテンツの間の余白。 | 要素の背景色が適用される |
| content | テキストや画像が表示される領域。 | 要素の背景色が適用される |
display: block がもたらす自由度前の資料で学んだ通り、インライン要素（<span>等）は上下の余白が効かないなどの制限があります。しかし、CSSで display: block; を指定することで、自由な余白設計が可能になります。
width や height で箱の大きさを自由に変えられる。margin を使って、配置場所を調整できる。padding を使って、箱の中にゆったりとした空間を作れる。margin: auto; を使って、箱自体を中央に配置できる。初心者がよく迷うのが「marginとpaddingの使い分け」です。以下のイメージを持つとスムーズです。
padding を使います。margin を使います。padding を使います。現在のコーディングでは、padding や border を増やしても箱全体の幅が変わらないようにするために、以下の設定をすることが一般的です。
box-sizing: border-box;
※これを使わないと、paddingを増やすたびに箱全体がデカくなってしまい、計算が大変になります。