我对font-size和line-height的基本CSS规则非常简单：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
}当我创建一个包含<em>或<strong>的段落时（甚至一些<code>使用不同于<body>的font-size），我注意到这些元素会将行高增加一到两个像素。
这让我相信大多数浏览器都采用 * 最大 * 的内联元素来显示line-height，对吗？
我的目标是使line-height一致，而不管哪些元素是内联的。
我发现使line-height一致的唯一方法是定义：
em, strong, code, etc {
line-height: 100%;
}这是正确的方法吗？还是我太完美了？
编辑1：
这似乎也行得通：
em, strong, code, etc {
line-height: 1;
}编辑2：
在玩了几天之后，似乎没有一个可靠的解决方案来保持line-height的一致性。
编辑3：
根据我自己的研究和将来的参考，只要这些标签与其他标准正文文本沿着内联显示，就应该将它们与line-height: 1一起考虑：
abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var这些要素是值得怀疑的：
a, bdo, img, span
5条答案
按热度按时间zrfyljdw1#
说明书证实了你的想法浏览器采用最大的字体来计算行高。这意味着您唯一的选择（也是规范中提到的）是为你关心的行上的所有内联框设置行高。你可能不会对选择
body *和设置字体大小的结果感到满意。因此，在任何文本块周围添加一些具有相同类的Div，以使其看起来一致，这样就可以了：sshcrbum2#
定义
body {line-height: 0}，然后用line-height: 1或1.5或其他值定义主要内容区域的行高，这似乎是最好和最灵活的方法。例如，对于图像或其他网格，行高可能会出现问题，因为它们需要彼此对齐，就像画廊风格。当图像有锚标签时，通常会出现这种情况，因为锚标签继承了其父标签的行高。规范允许使用“正常”值，但这似乎是每个浏览器的不同标准。1或100%也是选项。但“0”似乎基本上使所有浏览器强制采用相同的标准，就像一个好的CSS重置。当然，所有文本都被压缩成一行，这就是为什么在内容区域设置行高是必要的。
Here's a codepen I put together to illustrate the point
bihw5rsg3#
这个线程已经有几年的历史了，在此期间事情可能已经改变了，但是下面的代码（我在http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/（archive）上重新发现的）对我很有效：
这是相当令人惊讶的，因为
vertical-align本身似乎与line-height无关;再说一次，这是CSS，所以你永远不会知道。上面引用的网站实际上建议在我看来像是黑客攻击。
6rvt4ljy4#
我觉得这主意不错。
但是，不要忘记，如果粗体/斜体文本太大，那么在只有一行需要的情况下，将所有行都设置得很高，可能会影响可读性。如果您的示例还没有处理上标和下标，您可能还需要一些处理上标和下标的东西。
zzwlnbp85#
我没有看到这种行为，但我使用的是WebKit。如果您在这个示例中添加一些粗体标记，是否会出现这种问题？
http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height