如果我将line-height提供给像h1这样的块元素，则会在每个文本行的上方和下方添加空格，这意味着该元素不会在同样的顶级位置。如果我只想在每条线下面留一个间距怎么办？我知道vertical-align仅适用于内联元素。
我还认识到，默认情况下，像p标记这样的块元素的文本不在行高“普通”的顶部。如果我为元素添加背景颜色，则在文本上方几个像素处也可以看到颜色。为什么呢？
答案 0 :(得分：18)
TLDR ：使用position: relative和一个负顶值伪造它。
解释：你是对的。始终在每个字符的上方和下方添加行高。因此，如果您的字体大小为12px并且您的行高为18px，那么您将获得3px以上，并且每行“3”以下3px。这些3px空间中的每一个都被称为“半导体”。
但是，您可以使用带有负值的position: relative来显示每条线下方只添加空格。
所以假设你想在每一行之间有8px的空间而不是上面的例子中的6px（18px / 12px = 6px = 3px在顶部+ 3px在底部）。要做到这一点，将行高从18px增加到20px，使半前导4px，并在行之间总共提供8px的空间。然后添加position: relative; top: -2px以使线条回到当线高为18px时的相同位置。
即使浏览器仍然在每行的上方和下方添加4px的空间，负向垂直定位将使得看起来额外的顶部间距被切断。
答案 1 :(得分：0)
如果我只想在每行下面留一个间距怎么办？
在大多数情况下，我真的不认为接受的答案会比这个更好。
margin-bottom: .5em
重要的是使用em，因为它将基于当前字体大小。
另外请注意，如果文本换行为两行，而您使用的是line-height: 2，则最后两行之间会有很大的差距。然后，几乎可以肯定，最好将margin-bottom与默认line-height一起使用。