ボックスモデルを理解してコーディングしよう : HTMLコーディングのノウハウ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

ボックスモデルを理解してコーディングしよう

ボックスモデルの概念

ボックスモデルとはブロックレベル要素がもつ短形領域の概念で、内容・マージン（margin）・パディング（padding）・ボーダー（border）から構成されます。
この概念を覚えておくことでCSSレイアウトがぐんと楽になります。

下図がボックスモデルを図に表したものです。

破線で囲われている領域が、widthとheightで指定した領域で、ここが文字・画像など表示領域です。
しかし、"padding: 35px"と"border: 3px"が指定されているため、この要素の大きさは、幅が416px、高さが216pxになります。
そのため、例えばこの要素を二つ横に並べる場合には、幅832pxの親要素が必要です。

しかし、WinIE6（後方互換）以下ではwidthとheightの値がそのまま要素の大きさになり、そこから"padding: 35px"と"border: 3px"を引いた分が表示領域になってしまいます。
そのため、Firefoxでしっかり表示されていても、WinIE6（後方互換）で見た場合にレイアウトが崩れているということがよく起こります。

CSSでレイアウトを組むには、こういうブラウザごとの特性をよく理解した上でコーディングしていかなければいけません。

ということで、ボックスモデルの大きさを求める計算式を下記にまとめました。