图解line-height的使用

·  阅读 1066

line-height是什么

line-height属性用于设置行间的距离(行高),行高指的是字母的大小(font-size)和字母的上下边缘(字母大小 + 上下空白)。

所以,文本单行占据的高度不是font-size来决定的,而是由line-height来决定的。

line-height的写法

关键词

line-height: normal;
复制代码

取决于用户端。桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的 font-family

长度px、em

<p>udemy</p>

p{
 font-size:20px;
 line-height:30px;
}
复制代码

74ff0ca8776c56c0faa1675fd306a73.png

字母的大小(font-size)是20 px,line- height 是30 px,上下留白为5px。

数字

<p>udemy</p>

p{
 font-size:20px;
 line-height:2;
}
复制代码

b1fa3aaad23fb11ab03906d1c2f5431.png

line- height 为font-size: 20 px 的2倍(20 × 2= 40 px),字母的大小(font-size)是20 px,上下留白为10px。

百分比

<p>udemy</p>

p{
 font-size:20px;
 line-height:200%;
}
复制代码

2ea219a2efbac11001189e0f349db48.png

line- height 为 font-size: 20 px 的200% ,为40 px,同样上下留白为10px。。

PS:line-height可继承,给元素设置line-height会对其内部所有的孩子都生效

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改