border の有無でマージン相殺が変わる
2003年3月26日(水曜日)
border の有無でマージン相殺が変わる
偶然にも CSS の話題が続きますが……。
マージンの相殺という、なかなかマニアックな点に触れているところに期待が持てる連載なのだが、ひとつ気になる点があった。ボーダーの有無でマージンの相殺の挙動が変わるようなことが書かれていることだ。私の記憶によると複雑なルールではなかったはず。
以上、りゅうさんの偽偽夜食日記 2003年03月24日 より
元記事を読んでいないので想像ですが、これはおそらく、あるボックスの中に別のボックスが入れ子になっていて、両方にマージンが設定されている場合の話でしょう。この場合、外側のボックスに border も padding もないと、マージンは重なります。しかし border や padding があると重なりません。
CSS2 の "8.3.1 Collapsing margins" には、冒頭に以下のような記述があります。
In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
(no padding or border areas separate them)
という注意書きが味噌で、2つのマージンの間に padding も border もなければマージンは重なり得るし、そうでなければ重ならないわけです。
※もっとも、仕様のこの記述にはちょっと微妙なところがあります。padding or border areas
という言葉の解釈の仕方によっては、「border: none; padding: 0; であっても、そこには幅 0 の border 領域や padding 領域が存在しているので、マージンは重ならない」と解釈することも出来そうです。しかしそう解釈してしまうと、ネストされた要素のマージンは決して重ならない事になってしまいます。(which may be next to one another or nested)
と書かれているからにはネストされていても重なり得るということですから、そのような解釈は間違いと言えるでしょう。
具体的な例を出しますと、たとえば以下のようなマーク付けに対して……
<div id="div3">
<div id="div2">
<div id="div1">
<p>foo</p>
</div>
</div>
</div>
以下のようなスタイルを適用します。
#div1{
margin: 1em;
}
#div2{
margin: 2em;
}
#div3{
border: red solid 1px;
bckground: #fff; color: #000;
}
すると、中のブロックのマージンによって、あたかも div3 に padding: 2em 3em; が指定されているかのような見た目になります。上下のマージンは重なるので、div1 の 1em と div2 の 2em が重なって合計で 2em となります。※ちなみに左右のマージンはこの場合でも重ならないので、1em と 2em は重ならずに 3em になります。
このスタイルを以下のように変えると……。
#div1{
margin: 1em;
}
#div2{
margin: 2em;
border: #fff solid 1px;
}
#div3{
border: red solid 1px;
bckground: #fff; color: #000;
}
1px の border が指定されただけなのですが、もはや上下のマージンは重なりませんので、div1 の 1em と div2 の 2em は合わさって 3em となります。まるで div3 の上下 padding が 1em 増えたかのように見えます。※ちなみに左右の距離は 1px しか変わりません。
- 「border の有無でマージン相殺が変わる」へのコメント (8件)
- 前(古い): width: auto のフロート
- 次(新しい): 鳩丸トップの謎カウンタがリセット
