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。

来源

2017-10-08 tjwrona1992

的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>

来源

2017-10-08 07:00:52

实际上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

所以要去除，容易，把

来源

2017-10-08 06:42:31 Miraj50

顺便说一句对pre'标签'保证金，检查了这一点（HTTPS ：//stackoverflow.com/questions/35676687/avoid-the-margin-inside-pre-tag） – Miraj50

HTML为什么这两个元素不是直接放在彼此之上？

回答

相关问题