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;，以便您手动对齐它。

如何删除<p>标记/对齐文本顶部的空格到容器顶部？</p>

2 个答案: