line-height的单位,有注意过嘛

给元素指定line-height,有这么几种方式

1、指定的px高度line-height:20px;

2、指定的em高度line-height:1.5em;

3、指定的百分比高度line-height:150%;

4、指定的纯数字line-height:1.5;

5、normal inherit initial

 

我们重点看下前4种

可以看到,对于第一种

line-height:10px;

那么行高就是固定值 10px

 

第二种

line-height:1.5em;

行高的计算是根据content的font-size来计算的,10px*1.5=15px;

于是content里的标题和内容都继承了15px的行高。

 

第三种

line-height:150%;

和1.5em是一样的

 

第四种

line-height:1.5;

可以明显看到,高度比其他的高,这时的行高不是继承根据父元素算出来行高,而是用自己的font-size乘以系数1.5

对于标题 28px*1.5=42px

对于内容20px*1.5=30px

 

 

于是可以得出结论:

line-height为百分比和em值时,会根据父元素的字体大小计算出行高然后继承,如果是数值,则是根据子元素的字体大小乘以系数来计算。

百分比和em,与数值的区别就在line-height继承的时候,一个是算好了再继承,一个是继承数值,然后计算。