ボックスモデルについて考える　CSS

(X)HTML文章の要素ツリーはそれぞれボックスモデルという四角形の領域を持っています。
ボックスモデルは上図のようなcontent(内容領域）、padding、border、marginの４つの領域で構成されています。

内容領域

要素ツリーの内容自身にあたります。テキストや画像などです。
たとえばブロック要素もしくは置換要素であれば、そのサイズは ‘width’ および ‘height’プロパティで決まります。

＊置換要素とは：テキストでは無い何かに置き換えられるものです。属性などを用いて大きさが定められた、普通のテキストとは違ったものです。具体的には、imgやhr、iframeなどが主なものとしてあげられます。CSS内ではブロック要素、インライン要素と区別された扱いになります。

パディング

ボーダーと内容領域の間の余白部分になります。また、この領域には内容領域で指定した背景色が適用されます。背景画像についてもこの領域を計算に加えて表示します。

ボーダー

パディングの外側にある枠の領域部分をボーダーと呼びます。
ボーダーは内容領域に適用した背景の上に重ねて描かれます。従ってボーダーの下にある背景は見えませんが、スタイルが点線・破線・二重線のときに隙間から背景を確認することができます。ボーダー幅が０ならボーダー辺とパディング辺は同一になります。

マージン

ボーダーの外の余白部分です。この部分には内容領域の背景は入らない透明となります。そのため親要素の背景が見える結果となります。マージン幅が０ならマージン辺とボーダー辺は同一になります。

ボックスモデルの横幅計算

ボックスモデルの横幅を計算する場合は以下のとおり行います。

（内容領域　widthプロパティで指定）＋（左パディング＋右パディング）＋（左ボーダー＋右ボーダー）＋（左マージン＋右マージン）

＊IE6以下あるいはIE後方互換表示ではwidthプロパティは内容領域＋パディング＋ボーダーの大きさを表します。これはコーディングの時に重要な問題点となっていました。けれども今となってもうIE6対策ももう過去のものとなりつつあります。