Section 12 : ボックス属性
First step CSS の Section 9 で，CSS では要素はボックスという長方形の領域に配置されることを説明した。これまでマージン，枠，パディングといったボックスに関係する属性がたくさん出てきたが，これらを整理してボックスという概念を明らかにしていこう。
ボックスの構造
今まで見てきたボックスに関する属性を総合すると，図 12.1 のようになる。要素のすぐ外をパディングがとりまき，その外に枠があって，マージンがとられている，という層状になっている。
背景色が適用されるのは枠を含めてその内側で，マージンの部分はつねに“透過色”である。
ここで注意したいのは，ボックスの大きさは要素の大きさ以上になるということである。
ボックスの幅は次のように定義される。
(box width) = (margin-left) + (border-left-width) + (padding-left) + (width) + (padding-right) + (border-right-width) + (margin-right)
width は要素の内容の幅である。
いっぽう，ボックスの高さは，
(box height) = (margin-top) + (border-top-width) + (padding-top) + (height) + (padding-bottom) + (border-bottom-width) + (margin-bottom)
と定義できる（height は要素の内容の高さ）が，次に説明するマージンの圧縮でボックスどうしが垂直方向に重なり合う場合がある。
マージンの圧縮
通常のブロック要素ではマージンが狭くなることがあるというのは First step CSS の Section 10 で触れた。通常のブロック要素が上下に並置されたとき，その間のマージンは上の要素のボトムマージンと下の要素のトップマージンの和にはならず，それらの最大値がとられるというものである。
このようなマージンの圧縮は，上下に並置されたとき以外に，マージンを持つブロック要素の中にマージンを持つブロック要素が入れ子になったときにも起こる。ただし，この場合は無条件ではなく，一定の条件の下でしか圧縮は起こらない。
外側のブロック要素に枠，パディングの両方とも指定されていないとき，その要素のトップマージンとその内側のもっとも上にある要素のトップマージンの最大値がその部分のトップマージンになる。ボトムマージンについても同様である。ただし，外側の要素に枠もしくはパディングが指定されている場合はこのようなマージンの圧縮は起こらない。
たとえば，次のように指定がされていたとする。
BODY { margin: 1pc; }
P { margin: 6pt; }
このとき <BODY> の最上部から <P> の内容の上端までのマージンは 1[pc]＋6[pt]＝18[pt]（1[pc]＝12[pt]）にはならず，1pc と 6pt の大きい方，すなわち 1pc がとられる。
このようなことから，3 つ以上の直接隣り合った垂直マージンから圧縮が起こる場合もある。
<P STYLE="margin: 10pt;">ブロック要素 1</P>
<DIV STYLE="margin: 20pt;">
<P STYLE="margin: 5pt;">ブロック要素 2</P>
</DIV>
このときの最初の <P> と <DIV> の中にある <P> との間隔はいくらになるだろうか。実際に出力させてみよう。