HTML为什么这两个元素不是直接放在彼此之上?
问题描述:
我正在尝试编写一些HTML代码,以直接在pre
文本块之上覆盖另一个元素。HTML为什么这两个元素不是直接放在彼此之上?
的问题是,即使是最简单的例子似乎并没有正确对齐......
<div style="position:relative">
<pre style="position:absolute">
hello
</pre>
<div style="position:absolute">
world
</div>
</div>
你可以看到输出here。
div
元素呈现在pre
元素上方。这是为什么发生?
有关元素定位的更多信息可以参考here。
答
的pre
标签具有的margin: 1em 0px;
保证金默认情况下,所以你需要边距设置为零,以覆盖此。然后在这之后还有少量差距。这是因为字体。在我的例子中。我已经覆盖了font-family
继承父项的font-family
,所以元素完全对齐。另一件事是,同样反之亦然效果可以font-family
做了div
标签,而不是pre
标签
pre{
margin:0px;
font-family:inherit;
}
<div style="position:relative">
<pre style="position:absolute">
hello
</pre>
<div style="position:absolute">
world
</div>
</div>
答
实际上div
元素“is”呈现在pre
元素上方。我们只是无法看到它。我添加了css的border
属性以使其可视化,因为“前边距”。
<div style="position:relative">
<pre style="position:absolute">
hello
</pre>
<div style="position:absolute; border:1px solid red;">
world
</div>
</div>
这就是说,你现在可以添加一些css
来接班了一下,得到你想要的东西,像这样的!
<div style="position:relative">
<pre style="position:absolute">
hello
</pre>
<div style="position:absolute; border:1px solid red; top: 7px">
world
</div>
</div>
希望帮助! 另外我知道pre
标签的顶部有一些默认的margin
。看到这个检查出来!
入住这Fiddle
所以要去除,容易,把
顺便说一句对pre'标签'保证金,检查了这一点(HTTPS ://*.com/questions/35676687/avoid-the-margin-inside-pre-tag) – Miraj50