line-height 3种设置方式的区别
前言 ：平常写CSS习惯性的写 line-height: 1.5em ，也见过类似 line-height: 1.5 ， line-height: 150% 这种写法，但是从来没有想过这三者有什么区别，最近突然看到有人提到这个问题，很感兴趣，于是查资料自己尝试了一下。
首先有一点要明确的是，line-height是具有继承性的，如果直接在某个元素上使用line-height，那么这三种写法是没有区别的，比如给所有的p标签添加行高属性：
最后的效果是一样的。
这三种方式的区别在于，给父元素设置行高的时候子元素的继承方式。
假如我们有一个父div类名为parent1，另一个父div类名为parent2，均包含了一个类名为child的子div，HTML结构如下：
CSS如下：
此时的页面如下截图：
可以看到，当设置 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
