这无疑是一个愚蠢的问题，但我今天过得很糟糕，这让我很困惑！
如果您查看http://jsfiddle.net/E6kGP/1/然后您可以看到两个相邻的简单 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>
一如既往地非常感谢大家！
可能是为了容纳重音字符，尝试将 ä 放入第一个<p>，额外的空间有助于容纳口音。也就是说，我并不 100% 相信这是最终原因。
您始终可以专门针对 a 的第一行<p>使用以下元素来减少它：
p::first-line {
line-height: 0.8em;
}
尽管这是理所当然的，但这并不能解决“为什么”的问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
