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

Posted 2022-03-02 明天也要努力

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 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。
可以包含这些内容的最小框就是行框。

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

名称	描述
默认值：	normal
继承性：	yes
版本：	CSS1
javascript 语法：	object.style.lineHeight=“2”

可能的值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

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

浏览器名称	最低支持版本
谷歌	1.0
IE	4.0
火狐	1.0
safari	1.0
opera	7.0