【CSS】 上下のマージンは互いに相殺されるようだ。

要素の上と下にマージンをつけて、それを連続で配置すると、相殺されて大きい方のマージンが採用される。

<p>文字列第1段落。</p>
<p>文字列第2段落。</p>
<p>文字列第3段落。</p>

例えばこのHTMLコードで、<p>タグに上に1em、下に1.5emのマージンを設定したとすると、<p>タグと<p>タグの間にあく隙間は、 1+1.5=2.5em にはならず、大きい方の 1.5em となる。

Firebug で調査してみた図が下記。

Firebug を使ったことがある人はご存知と思うが、黄色い帯がマージンで、青い帯が、要素の実体が存在している領域を示している。

上段の margin-bottom と中段の margin-top が相殺され、多い方の分だけ間が開いていることがわかる。

この相殺のルールについて、いくつか調査してみたい。

まず、中段の<p>を、次のようにブロック要素(ここでは<div>タグ)で囲ってみた。

<p>文字列第1段落。</p>
<div>
    <p>文字列第2段落。</p>
</div>
<p>文字列第3段落。</p>

この時点では、とりあえず表示は変わらないようだ。Firebug で<div>を調べてみると次のような感じ。

青い帯が<div>タグの表示なわけだが、<div>タグそのものにマージンはついていないにもかかわらず、下側にあいているマージンは 1.5em のままだ。つまり、中に含まれているはずの<p>タグにかかったマージンが、<div>タグを跨いで有効になっているという状態。

<p>タグに設定されたマージンが、<div>タグを跨げなくなる条件を調べてみると、次のようになった。(ただし、○は「跨げる」を、×は「跨げない」を示す。「跨げない」場合は、1+1.5=2.5em の間隔があくようになる。)

注意したいのは、親要素となる <div>タグ にマージンを設定した場合。子要素のマージンと共に相殺される。<div>タグに margin:1em を設定したら、次のようになる。

左から2番目が<div>タグ、3番目が中段の<p>タグの様子だ。

今回のテストでブラウザ依存が確認されたのは、display、zoom、overflow の3つのCSSプロパティ。display と zoom はそもそも非対応だったりとかするので当然だが。

• ※モダンブラウザは、Firefox3.0.6、Opera9.63、Safari3.2.1 (それぞれWindowsXPのみ) を使用して調査。
• ※XHTML1.1(標準モード)でレンダリングした。