如果我给 h1 之类的 block 元素 line-height，它会在每个文本行的上方和下方添加空格，即表示元素不在相同的顶部位置开始。如果我只想在每行下方留一个间距怎么办？我知道 vertical-align 只适用于 inline-elements。
我还认识到像 p 标签这样的 block 元素的文本默认情况下不在行高“正常”的顶部。如果我向元素添加背景颜色，该颜色在文本上方几个像素处也可见。为什么？
最佳答案
TLDR:使用 position: relative 和一个负的 top 值来伪造它。
解释:你是对的。始终在每个字符的上方和下方添加行高。因此，如果您的字体大小为 12px 并且行高为 18px，则每条“线”上方 3px，下方 3px。这些 3px 空间中的每一个都称为“半行距”。
但是，您可以将 position: relative 与负的 top 值一起使用，使它看起来好像每行下方只添加了空间。
假设您希望每行之间有 8px 的空间，而不是上面示例中的 6px(18px/12px = 6px = 顶部 3px + 底部 3px)。为此，将行高从 18px 增加到 20px，使半行距为 4px，并在行之间提供总共 8px 的空间。然后添加 position: relative; top: -2px 使行回到行高为 18px 时的位置。
即使浏览器仍在每行上方和下方添加 4px 的空间，但负垂直定位会使额外的顶部间距看起来像是被切断了。
关于css - 使用行高时在顶部对齐 block 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4089379/