ボックスモデルを理解しよう

このレッスンでは、CSSのボックスモデルという基本概念を学び、要素の余白や枠線の仕組みを理解することを目標にします。「CSS ボックスモデル とは」「CSS padding margin 違い」で調べている方向けです。

すべてのHTML要素は「箱(ボックス)」として扱われます。内側からpadding(内側の余白)・border(枠線)・margin(外側の余白)の順に重なっています。これをボックスモデルと呼び、CSSレイアウトの土台となる考え方です。

サンプルコードでは、.boxにpadding: 16px;・border: 4px solid #7c5cff;・margin: 20px;という3つの余白・枠線を指定しています。paddingは要素の内側の余白なので背景色が付いた状態で、marginは要素の外側の余白なので背景色が付かない状態で表示される違いを確認してみましょう。

要素の見た目が「なぜかズレる」と感じたときの原因の多くは、このpadding・border・marginの理解不足です。初心者がよくつまずくのが、marginが上下の要素同士で重なって「相殺」される現象で、期待した間隔より狭くなることがあります。

箱を実際に手に取るイメージで、内側の余白と外側の余白を意識して調整する習慣をつけましょう。CSS設計の基礎中の基礎であり、この理解なしに複雑なレイアウトを組むのは難しいと言われるほど重要な考え方です。