html – CSS中不同大小的文本之间的相等间距

如何使用CSS在不同大小的行之间获得相等的间距？这是我的基础html：

尽管字体大小不同,我希望每条线之间的间距相同(即下面的红色箭头应该相等).我无法弄清楚如何使用CSS line-height属性执行此操作.

最佳答案

我认为其他答案几乎就在那里,但是线高有点不同.我想到的方式是,行高是从字母中心开始的空间量.因此,如果您的行高为50px,则字母中间上方将有25px空间,而字母中间下方将有25px空间.这使得线条高50px.

因此,为了使它们之间的空间均匀,我会使用边距底部并将线条高度设置为看起来像是对接到字母顶部和底部的东西(可能根据您使用的字体而不同).在我下面的例子中,我将行高设置为.7(你可以看到它如何按下字母的实际基线和顶部高度与红色边框.然后我给了一个余量值与rem单位,所以它是相对于原始页面字体大小,而不是具有唯一字体大小的div本身.

body {
  font-size: 24px;
}

div {
    line-height: .7;
    margin-bottom: 1rem;
    border: 1px solid red;
}