如何删除 <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;
}

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

Answer 2

正如 ExtPro 所说，它是为了适应重音字符。一个简单的解决方法是使用 margin-top:-<number>px; 以便您手动对齐它。