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 |
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/141312.html
