html - 如何删除 <p> 标签顶部的空间/将包含的文本对齐到容器顶部？

Question

这无疑是一个愚蠢的问题，但我今天过得很糟糕，这让我很困惑!

如果您查看 http://jsfiddle.net/E6kGP/1/然后您可以看到 2 个简单的 div，每个 div 都包含一个 p 标签，每个标签具有不同的字体大小和匹配的行高。

p 容器的顶部和包含的文本的顶部之间有一个小间隙，该间隙根据字体大小(和行高)而有所不同。这意味着每个 p 中文本的顶部不是垂直对齐的。如果行高与字体大小不匹配那么我可以理解这一点但是如果它们相同那么行高应该匹配最高的字符因此第一行的最高点应该是顶部p 容器？显然这可以使用填充/边距或绝对定位来破解，但我想了解为什么这在默认情况下不起作用以及修复它的正确方法是什么？

根据 SO 的要求，jsfiddle 的代码也在下面:

div {float: left; width: 50%;}
p {margin:0 0 1em;padding:0;}
#left p {line-height:36px;font-size:36px;}
#right p {line-height:16px;font-size:16px;}

<div id="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

一如既往地感谢大家!

Answer 1

这可能是为了适应重音字符，尝试将 Ä 放入第一个 <p> , 额外的空间有助于容纳口音。也就是说，我不是 100% 相信这是确定的原因。

您始终可以专门针对 <p> 的第一行元素减少它使用:

p::first-line {
    line-height: 0.8em;
}

虽然理所当然，但这并不能解决“为什么”的问题。