CSS2~“Box model”

仕様書

この章ではCSSにおいて要素を表すボックスの構造を表したボックス・モデルについて定義しています。

この章の一部は“CSS Box Model Module”や“CSS Backgrounds and Borders Module”によって置き換えられ、拡張されています。

プロパティ

マージンの折り畳み

隣接して配置されたボックスのマージンは融合してひとつのマージンになることがあり、このことは“マージンの折り畳み(Collapsing margins)”、もしくは“マージンの相殺”と呼ばれます。

隣接するボックスがどちらも同じブロック整形コンテキストに含まれているブロック・レベルのボックスであり、ボックスの間にそれらを隔てる行ボックスやクリアランス(“clear:none;”以外)、パディング、ボーダーがない場合にマージンの折り畳みが起こります。

マージンの折り畳みが起こるとボックス間の間隔は両方のボックスのマージンの幅の合計ではなく、いずれかのボックスのマージンのうちの大きい方の幅になります。

マージンの折り畳みはブロック軸方向に隣接する兄弟ボックスのマージンで起こる他、親子ボックスの間でも起こります。親ボックスがパディングとボーダーをいずれも持たない場合には子ボックスのマージンが親ボックスからはみ出して折り畳みが起こります。

また、ブロック軸方向の大きさが“0”で、フロー内にあるコンテンツを何も内包しないボックスは、そのボックス自身のマージン同士で折り畳みが起こります。

ルート要素(HTMLでは“html”要素)のマージンや異なる整形コンテキストに含まれるボックスのマージン、インライン軸方向に隣接するボックスのマージンは折り畳まれません。