图解line-height的使用

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

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

数字

<p>udemy</p>

p{
 font-size:20px;
 line-height:2;
}

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

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

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