hr要素に指定した下マージンが親要素の下マージンとして反映される

症状

hr要素に display:block; と任意の下マージンを指定したとき、そのhr要素を最後部に内包する親要素の下マージンがhr要素に指定した下マージンと同じ値になる。

例示

<div style="margin:0; border:2px solid red;">
<hr style="display:block; margin-bottom:1em;">
</div>
<div style="margin:0; border:2px solid blue;">↑</div>
↑

hr要素に1emの下マージンを設定しています。また、div要素のマージンは0にしています。

スクリーンショット

N7N7.02での表示（標準モード）

WinIE6WinIE6.0での表示（標準モード）

補足

バグを回避する方法がいくつかあります。

  • hr要素への display:block; 指定をやめる（ただし、Gecko系UAで別のバグ（『互換モードではhr要素に指定したclearプロパティが無視される』、『折り返しを抑制した要素内にあるhr要素の幅が正しく算出されない』）が発生することがある）。
  • 親ブロックに任意の（auto以外の）widthかheightを指定する。 
    <div style="margin:0; border:2px solid red; width:100%;">
<hr style="display:block; margin-bottom:1em;">
</div>
<div style="margin:0; border:2px solid blue;">↑</div>
  • hrをブロック内の最下部にしない。つまりhrの次に何か書き入れる。 
    <div style="margin:0; border:2px solid red;">
<hr style="display:block; margin-bottom:1em;">
○</div>
<div style="margin:0; border:2px solid blue;">↑</div>
  • hrへのmargin-bottom指定値を0かautoにする。 
    <div style="margin:0; border:2px solid red;">
<hr style="display:block; margin-bottom:0;">
</div>
<div style="margin:0; border:2px solid blue;">↑</div>

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードで不具合の発生が確認されました。

WinIE7でも発生します。

関連記事

スポンサーリンク

SetRightMargin - 右マージン指定

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る