都喜欢给line-height带单位，但是在一些情况下会出现问题，看例子：
复制代码
<style type=”text/css”>
.demo{line-height:150%;}
pre{font-size:30px;}
</style>
<div class=”demo”>
<pre>
第一行
第二行
</pre>
</div>
两行文字发生了重叠。
为什么带单位的line-height继承，有可能会发生重叠的现象呢？
如果line-height属性值有单位，那么继承的值则是换算后的一个具体的px级别的值；而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。
上例中的div的line-height为150%，由于默认情况的字体大小为16px，所以div的具体line-height值可换算为16px*150%=24px，由于pre的line-height会继承24px这个换算过后的具体值，此时pre又被重新定义了font-size:30px;字体大小超过了line-height的大小，于是发生重叠。其它单位原理一样。
因此建议，养成给line-height不带单位的习惯，如line-height:1.5;这种写法避免重叠。
在显示文章的box里，px的表示方法首先是要被淘汰的。因为文章里面的文字是有大有小的，使用px定值，由于继承性，无法实现根据文字大小自动调整间距，会出现大号文字重叠的现象。normal也是不行的，一般文章显示最好是650像素的宽度，1.5倍的行距较好。
一般浏览器的normal值在1~1.2之间，使用normal必然文字间距过小，阅读吃力。
百分值也有继承性，但是有个很搓的办法可以实现文字间距自动适应于文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不会出现文字重叠的情况了。
