回答編集履歴
1
position: relativeの説明のためのリンクを追加
test
CHANGED
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
|
|
55
55
|
本来`<hr>`要素は子要素をもつことができませんが、[:after疑似要素によって子要素が追加されています。](https://developer.mozilla.org/ja/docs/Web/CSS/::after)
|
|
56
56
|
|
|
57
|
-
疑似要素は`top: -0.7em`によって表示位置をずらしていますが、`position: relative`なので本来表示されるはずだった場所にはスペースが残ります。
|
|
57
|
+
疑似要素は`top: -0.7em`によって表示位置をずらしていますが、`position: relative`なので[本来表示されるはずだった場所にはスペースが残ります](https://developer.mozilla.org/ja/docs/Web/CSS/position#Relative_positioning)。
|
|
58
58
|
|
|
59
59
|
結果的に、`<hr>`要素は上側だけに二重線のボーダーを持つ透明な長方形になったため不自然な空白ができたという寸法です。
|
|
60
60
|
|
|
61
|
-
`<hr>`要素の高さが子要素に引きずられないよう、`height: 0`することで空白を解消しています。
|
|
61
|
+
`<hr>`要素の高さが子要素に引きずられないよう、`height: 0`とすることで空白を解消しています。
|