line-height 3种设置方式的区别

前言：平常写CSS习惯性的写 line-height: 1.5em，也见过类似line-height: 1.5，line-height: 150%这种写法，但是从来没有想过这三者有什么区别，最近突然看到有人提到这个问题，很感兴趣，于是查资料自己尝试了一下。

首先有一点要明确的是，line-height是具有继承性的，如果直接在某个元素上使用line-height，那么这三种写法是没有区别的，比如给所有的p标签添加行高属性：

p{line-height: 1.5em;}
p{line-height: 1.5;}
p{line-height: 150%;}

最后的效果是一样的。

这三种方式的区别在于，给父元素设置行高的时候子元素的继承方式。

假如我们有一个父div类名为parent1，另一个父div类名为parent2，均包含了一个类名为child的子div，HTML结构如下：

<div class="parent1">
    <div class="child">line-height: 1.5em;</div>
</div>
<br><br>
<div class="parent2">
    <div class="child">line-height: 1.5;</div>
</div>

CSS如下：

.parent1{
    font-size:14px;
    line-height: 1.5em;
    background: #999;
    padding:10px
}
.parent2{
    font-size:14px;
    line-height: 1.5;
    background: #999;
    padding:10px
}
.child{
    font-size:26px;
    background: #ccc;
}

此时的页面如下截图：

image.png

可以看到，当设置line-height: 1.5em时，很明显子div的文字已经超出自己的行高范围了，设置line-height: 1.5时子div的文字没有超出自己的行高。

这是由于CSS继承时的计算方式区别造成的，如示例，当我们给类名为parent1的父div设置line-height：1.5em时，该div的font-size为14，此时经过计算父div的line-height为14px*1.5=21px，然后子div的line-height就会继承21px这个值，而子div的font-size为26px，自然会超出自己的行高范围。

而当我们给类名为parent2的父div设置line-height：1.5时，子div会直接继承line-height：1.5，然后计算26px*1.5=39px，不会超出自己的行高范围。

经过测试line-height: 150%和line-height: 1.5em相同，都是先计算然后把固定的行高继承给子元素，所以我们可以总结一下，继承line-height的时候，带单位的先计算再继承，不带单位的直接继承。

以上就是我对line-height这个属性一点浅显的认识。

参考资料：http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html