ボックスモデル

ボックスモデルとはその名の通り、各要素の配置を箱を置いておくようなイメージでとらえるものです。意図どおりのレイアウトにならないときは、このボックスモデルの理解が不十分なことに原因がある場合があります。まず、基本となるのが、テキストや画像など、ブラウザ上に表示すべき実体である内容物(コンテントcontent)の領域です。この領域はwidthプロパティ・heightプロパティを使って、幅、高さを指定することができます。

このコンテント領域の周囲にパディング、ボーダー、マージンの領域を指定できます。それぞれの領域を指定することで、1つの要素が構成する箱の大きさは大きくなります。マージンは周囲の要素との余白と説明しましたが、実際にはマージンを設定した要素に属するもので、透明な箱をイメージするとよいでしょう。つまり、width.heightプロパティで指定した幅・高さにさらにこれらの幅・高さを付け加えたものがその要素が構成するボックスの帽・高さになります。