line-height是可以继承的，所以子元素就可以不用重复定义line-height了。我们一般也会在后面带上单位(如:line-height:22px;

或是line-height:1.4em;)，但line-height会给人带来麻烦的地方也就是这个继承和后面加的单位。

我们先看一张图

上面的这张图片大家会觉得眼熟。CSS高手一眼就能看出这是line-height导致的，有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em。或许是习惯，于是我们都习惯了line-height是要有单位的。这些情况下，我们都不需要考虑

line-height的继承,也不会发现任何问题，当然后我们在使用到line-height继承的时候，就会发现问题的所在。

例如下面的代码： 1、样式 <style type="text/css">  .test{line-height:1.4em; font-size:12px;}  span{font-size:30px; font-weight:bold;}  </style> 2、HTML结构 <div class="test">    <span> 白培铭先生于1960年出生于中国台湾。<br/>           毕业于中国台湾省清华大学核物理系，<br/>     </span>     之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。<br/>     在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造<br/> </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的大小，于是发生重叠。其它单位原理一样。

解决方案3 ( 推荐 )：为了应付各种不可尽知的情况，请习惯不要给line-height单位。