line-height属性不同值类型的表现

line-height属性值的类型

line-heigh属性的值可以为normal，纯数字，具体带单位长度，百分比数值，inherit。

重点讨论

normal和inherit不做探究，normal是默认值，浏览器计算合理行间距，inherit继承父元素line-height属性；

长度类型是设置固定的行高值，比较好理解；

数字类型会根据行内元素有效的字体大小计算出行高；

百分比会根据设置line-height属性的元素的字体大小计算出行高；

这里重点讨论百分比数值和纯数字值类型的区别，考虑如下代码：

css样式
p {
font-size: 50px;
}
.box-a,.box-b {
font-size: 20px;
width: 100px;
}
.box-a {
line-height: 1.5;
}
.box-b {
line-height: 150%;
}

html代码
<div class="box-a">
<p>我是box-a,有效字体大小是50px;</p>
</div>
<div class="box-b">
<p>我是box-b,有效字体大小是50px;</p>
</div>

结论

通过上面的demo可以看出，box-b中p标签的line-height属性是30px，box-a中p标签的line-height属性是75px;

出现这种差异的原因是数字属性计算时会根据子元素标签字体大小属性重新计算行高，而百分比只会以设置line-height属性的标签的字体大小去计算，而不会根据子元素标签的字体属性重新计算，设置长度以em为单位是和百分比是一样的效果。

以上均属本人实践理解的结论，如有错误或不同理解欢迎提出宝贵意见！