line-height:150%, line-height:1.5的区别

主要区别还是1.5内部继承的是未经过计算的，line-height:150%是经过计算的。
因为line-height:继承属性和其他css不一样的地方是根据font-size:px数值进行计算的

　　我们都知道line-height是可以继承的，由于这个特性，子元素就可以不用重复定义line-height了。但line-height会给人误解的地方也就是这个继承。这是怎么回事呢？别急，我们先来看一幅图。

看着图一，是不是让你心生“亲切”呢?^_^不过即使不感到亲切，也会觉得眼熟。明眼人一眼就能看出这是line-height导致的，其实这就是line-height好玩的地方。

　　有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em。或许是习惯，于是我们都习惯了line-height是要有单位的。

　　但，很明显，这些情况下，我们都不需要考虑line-height的继承，所以我们不会发现任何问题。

　　然而，当你要使用到line-height继承的时候，你会发现原来还有那么多的猫腻藏在其中。比如有这样一个结构（例一）：

<style type="text/css">
.test{line-height:150%;}
pre{font-size:30px;}
</style>
<div class="test">
<pre>
第一行
第二行
</pre>
</div>

 　　你会发现这2行字重叠了，问题来了吧。按普通的思维定式来看，由于line-height会被继承，于是pre内部的文字也应该是line-height:150%，所以出现重叠，似乎太过玄乎？

　　别急，再来看更具体的例子（例二）：DEMO

　　看过例子后，你会发现，只要有单位的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，pre由于会直接继承1.5这个因子，所以pre的line-height值为 30*1.5=45px;字体大小小于line-height，不会重叠，line-height永远是本身font-size乘以“因子”的倍数。

　　为了应付各种不可尽知的情况，请习惯不要给line-height单位。

标题，段落与行高的关系

一般的情况下标题用1.2 ，段落至少用1.5（在万维网内容可存取性指南2.0版有叙述）