css中line-height继承的问题

作为新手，在写样式的时候会遇到各种css的问题，尤其是细节处理上，刚开始学css时，line-height继承的问题也是一个常碰到的，后来虽然不断地学习中，也慢慢就知道了，但没有记录下来。最近自己正在收集一些知识点和经验，作为收藏，由于文字功底不好，关于line-height这个问题，本文也只是粗糙记录了一下。

大家都知道元素的 line-height 属性值会继承父元素（或祖先元素）的 line-height 属性值，下面我们来看一下具体的分析

1、line-height属性值有单位或者百分比的情况

 代码： 

<div style=”font-size:12px;line-height:200%;”> 

      <p style=”width:400px;”>关于css中 line-height继承的问题,如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；</p>

      <p style=”color:#00F; font-size:40px;width:600px;”>此时字体大小为40px;如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；</p>

</div>

效果：

大家可以看到上面代码的祖先元素设置为200%，按继承，第一段文字line-height为24px;是对的，第二段p会发生重叠的现象。

假如这个子元素的字体改变的时候（比如第二段p字体一下子到font-size:40px;的时候），可能有人认为行高应该是80px（40*200%），其实错了,你看一下效果，并不是，

这种情况下，是因为line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

我们代码中,line-height其实已经换算成一个具体的24px级别的值，那么第二段的字体设置为40px,其实line-height还是24px;

2、line-height属性值没有单位的情况

如果属性值没有单位，则浏览器会直接继承这个”因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

比如我们设置为line-height:3，此数字会与当前的字体尺寸相乘来设置行间距。可以得到如下的效果。

代码：

 <div style=”font-size:12px;line-height:3″> 

    <p style=”width:400px;”>关于css中 line-height继承的问题,如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；</p>

<p style=”color:#00F; font-size:24x;width:600px;”>此时字体大小为24px;如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；</p>

</div>  

效果：