Home > Windows > Opera > ver.9 Under 入れ子関係の要素間で下マージンの相殺が正しく行われない

入れ子関係の要素間で下マージンの相殺が正しく行われない

入れ子関係にある複数の要素間ではマージンの相殺が行われることがあるが、Opera7ではこれが正しく行われない。ボーダーやパディングを挟む入れ子関係にあるにも関わらず以下のような状態になる。

最後の子ブロック要素にデフォルトのスタイルシートで下マージンを指定している要素（h1, pなど）があるとき、最後の子要素の下マージンが設置されない（Opera7.1では同量の下マージンが親要素に設置されてしまう場合がある）。(7.0/7.1)
最後の子ブロック要素に外部スタイルシートファイルやstyle要素などで下マージンを指定した要素があるとき、子要素と親要素の両方にマージンが設置されてしまう。(7.1)

Category: Opera, Windows, ver.9 Under
Tag: margin

例示

<div style="border:2px solid blue;">
    <p style="border:2px solid red;">例1</p>
    <p style="border:2px solid red;">例1</p>
</div>
<div style="border:2px solid blue;">例1</div>
<hr />
<div style="border:2px solid blue;">
    <p style="margin:1em 0; border:2px solid red;">例2</p>
</div>
<div style="border:2px solid blue;">例2</div>

例1

例2

例1は親要素に下マージンが設置されてしまう現象、例2は子要素と親要素の両方に下マージンが設置されてしまう現象の例です。