阿里巴巴网站导航怎么做/网址之家

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单位。