“CSS Box Model Module”｜CSSの仕様書とモジュール｜CSS3｜CSS－havin' a coffee break

＃

“CSS Box Model Module”はCSSにおいて要素を表すボックスの構造を表したボックス・モデルを定義している仕様書です。

ボックスの内外に生成される余白であるマージンとパディング、及びこれらの幅を指定する“margin”プロパティや“padding”プロパティなどが定義されています。

このモジュールはCSS2のマージンとパディングについての定義を置き換えます。ただし、“マージンの折り畳み”についての項は置き換えません。

＃

定義されているプロパティ

＃

ボックス・モデル

CSSを使用して描画される要素はコンテンツが内包される領域と、その外側を囲むように生成される“パディング”、“ボーダー”、“マージン”の4つの領域で構成され、この構成は“ボックス・モデル(Box Model)”と呼ばれます。

パディングとボーダーの下には“background”プロパティなどによる背景が描画され、ボーダーは追加で“border”プロパティなどを使用して着色したりすることができます。

マージンは視覚的にはボックスの外側にあり、常に透明です。クリックなどのインタラクションの時でもボックスの一部としてはみなされません。

また、要素を表すボックスは以下の4個のボックスの入れ子構造になっています。

“コンテント・ボックス(Content Box)”
コンテンツが描画される領域です。コンテント・ボックスの外縁はボックスの“インナー・エッジ(Inner Edge)”とも呼ばれます。: “パディング・ボックス(Padding Box)”
パディングの外縁までを含む領域で、コンテント・ボックスを内包します。: “ボーダー・ボックス(Border Box)”
ボーダーの外縁までを含む領域で、コンテント・ボックスとパディング・ボックスを内包します。: “マージン・ボックス(Margin Box)”
マージンの外縁までを含む領域で、コンテント・ボックスとパディング・ボックス、ボーダー・ボックスを内包します。マージン・ボックスの外縁はボックスの“アウター・エッジ(Outer Edge)”とも呼ばれます。

“width”プロパティや“height”プロパティなどによって指定できる要素の大きさはコンテント・ボックスの大きさです。

＃