hr要素の余白について

Question

区切り線を入れようと、以下のようなCSSを作りました。

hr.chapterline {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #666;
    color: #666;
    text-align: center;
}
hr.chapterline:after {
    content: "✿❀✿❀";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

二重線の真ん中に、contentで指定した、花びらが4つ並ぶデザインが入る区切り線なのですが、

<p>テスト</p>
<p>テスト</p>
<hr class="chapterline">
<p>テスト</p>
<p>テスト</p>

このようなhtmlを書いたとき、hr要素の下の部分（3番目の【テスト】の上）に大きく余白が空いてしまいます。
hr要素の上の部分と同じ高さの間隔に揃えたいのですが、何か方法はありますでしょうか？
contentを指定せず、2重線のみの場合は上下の余白が均等になりますので、content部分のpaddingが怪しいだろうと思っていますが…どのような指定をすればよいかわからず困ってしまいました。

もしよろしければお力添えをいただけますと幸いです。よろしくお願いいたします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[LUCIA]

！、そうでした！お知らせありがとうございます。ウェブ版だと見落としがちですね…。

Answer 1

IEでも動作するコードを提示します。
質問文のコードから1行追加しただけで、hr.chapterlineにheight: 0を指定しています。

サンプルコード (JS Bin)

hr.chapterline {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #666;
    color: #666;
    text-align: center;
    height: 0; /* ADD */
}
hr.chapterline:after {
    content: "✿❀✿❀";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

空白ができてしまう原因は、<hr>要素の子要素に高さを持つものがあるため、親要素である<hr>要素がそれに引きずられて高さを持ってしまったことにあります。
本来<hr>要素は子要素をもつことができませんが、:after疑似要素によって子要素が追加されています。
疑似要素はtop: -0.7emによって表示位置をずらしていますが、position: relativeなので本来表示されるはずだった場所にはスペースが残ります。
結果的に、<hr>要素は上側だけに二重線のボーダーを持つ透明な長方形になったため不自然な空白ができたという寸法です。
<hr>要素の高さが子要素に引きずられないよう、height: 0とすることで空白を解消しています。

Comments

[reosablo]

kei344さんのコードは私も初めに思い浮かびました。しかし、IEで表示してみたところ、✿❀✿❀が中央ではなく左端に寄ってしまったため別案を探し、この回答を提示するに至りました。`position: absolute`な要素に`display: inline-box`を指定した時の挙動がブラウザによって異なることがある？ようです。 https://www.tomotanuki.com/entry/position-relative-absolute#IE11-%E3%81%A7%E3%81%AF%E4%BB%96%E3%81%A8%E3%81%AF%E9%81%95%E3%81%84%E5%9F%BA%E6%BA%96%E4%BD%8D%E7%BD%AE%E3%81%AB

[LUCIA]

回答ありがとうございます！無事できました！
要素の位置指定についても勉強になりました。

[reosablo]

回答本文に`position: relative`のスペースが残る仕様について参考情報のリンクを追加しておきました。勉強になってもらえたようでなによりです。

Answer 2

hr.chapterline {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #666;
    color: #666;
    text-align: center;
    position: relative; /* ADD */
}
hr.chapterline:after {
    content: "✿❀✿❀";
    display: inline-block;
    /* position: relative; REMOVE */
    position: absolute; /* ADD */
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}
```**動くサンプル：**[https://jsfiddle.net/6cot7skd/](https://jsfiddle.net/6cot7skd/)