使用 line-height 时在顶部对齐块元素答案

【问题标题】：align block elements on top when using line-height使用 line-height 时在顶部对齐块元素
【发布时间】：2011-05-04 14:44:01
【问题描述】：

如果我将line-height 分配给像h1 这样的块元素，它会在每个文本行的上方和下方添加空格，这意味着该元素不会从相同的顶部位置开始。如果我只想要每行下方的间距怎么办？我知道vertical-align 只适用于inline-elements。

我还认识到，块元素的文本（如 p 标记）默认情况下不在行高“正常”的顶部。如果我向元素添加背景颜色，则该颜色在文本上方几个像素处也可见。为什么？

【问题讨论】：

标签： css

【解决方案1】：

TLDR：使用position: relative 和负的最高值来伪造它。

解释：你是对的。行高总是在每个字符的上方和下方添加。因此，如果您的字体大小为 12 像素，并且您的行高为 18 像素，那么您将在每个“行”上方获得 3 像素和下方 3 像素。这些 3px 空间中的每一个都称为“半前导”。

但是，您可以将position: relative 与负的最高值一起使用，以使每行下方似乎只添加了空格。

假设您希望在每行之间留出 8 像素的空间，而不是上面示例中的 6 像素（18 像素/12 像素 = 6 像素 = 顶部 3 像素 + 底部 3 像素）。为此，将行高从 18px 增加到 20px 以使半前导 4px 并在行之间总共留出 8px 的空间。然后添加position: relative; top: -2px 将线撞回到行高为 18px 时的位置。

即使浏览器仍在每行上方和下方添加 4px 的空间，负的垂直定位也会使额外的顶部间距看起来像是被切断了。

【讨论】：

我知道这是一个旧答案，但我目前将它与 em 一起使用，并认为我会添加一些我的输入。如果您使用 em，请记住文本的高度是 1em。如果将line-height 设置为1.5em，则需要将top 设置为-0.5em。
实际上，您可能希望将 top 设置为 @David 的一半，所以它将是 -0.25em

【解决方案2】：

如果我只想在每行下方留一个间距怎么办？

在大多数情况下，我真的看不出接受的答案比这更好：

margin-bottom: .5em

重要的是使用em，因为它将基于当前字体大小。

另外请注意，如果文本换成两行并且您使用的是line-height: 2，那么您最终会在两行之间出现巨大的间隙。那么你几乎肯定最好使用margin-bottom 和默认的line-height。

【讨论】：

如果没有适当的行高，一些字符（如 y、p、g、q 等）会在底部被截断。所以你仍然需要一个行高，但即使是适量的行高来显示这些字符的底部也会在行的顶部增加空间，这是不受欢迎的。如果您否定线高的顶部，您仍然会有底部间距，这意味着不需要 margin-bottom 并且不太可能有很大的差距，因为您会根据需要使用尽可能多的线来产生所需的两条线之间的间隙。