ボックスの概念

　さて、最大の山場に到着です。ここまでも難しいけれど、これは本当に感覚をつかむのが大変なんです。頑張ってください。

　CSSでは、すべての要素はボックスと呼ばれる四角い領域を持つと考え、この領域や領域を囲む枠線に対して大きさや色や位置を指定することでスタイルを変更します。

　ボックスは内容領域・マージン・パディング・枠線の4つの部分から構成されていて、下図のような構造になっています

　この概念を理解することで、枠線・枠線と要素の空白・枠線の外側の余白……といったような細かなスタイルを設定できるようになるのです。

内容領域
　テキストや画像など、要素の内容が表示される領域。
　widthプロパティやheightプロパティでサイズを指定することができます。

パディング
　要素の内容が表示される部分と枠線との間の余白領域です。
　要素のbackground-colorプロパティで指定した背景色はこの部分にも適用されます。

枠線
　要素の周りに表示される枠で、パディングの内側に設定されます。

マージン
　枠線の外側に設定される余白領域です。要素のbackground-colorプロパティで指定した背景色は、この部分には適用されず、背景は常に透明になります。そのため、親要素に背景が指定されている場合は、その背景色が透けて見えることになります。

背景色・背景画像
　内容領域とパディング領域(枠線の内側)に表示される色や画像です。

Back