CSS中 解决文字高度上下存在留白的问题

1. 问题

我们使用CSS为字体设置：font-size 后，发现高度会比正常UI设计的要高一些，字体的上下存在一部分留白区域占位置。

如图所示：

.test{
  font-size: 24px;
}

2. 解决方法

​原因：​ 字体有默认行高。

• 方法一：给它设置 line-height 为 1；

.test{
  font-size: 24px;
  line-height: 1;
}

• 方法二：给它设置 line-height 等于它的 font-size；

.test{
  font-size: 24px;
  line-height: 24px;
}

​效果：​

3. 关于 line-height 属性的拓展知识

​定义：​ line-height 属性设置行间的距离（行高）。

​注意：​ 不允许使用负值。

​说明：​

该属性会影响行框的布局。

在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

​可能的值​

​浏览器支持​

表格中的数字注明了完全支持 line-height 属性的首个浏览器版本。