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;
}

原文地址：https://www.jb51.cc/html/426538.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。