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

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

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

代码：

关于css中 line-height继承的问题,如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

此时字体大小为40px;如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

效果：

关于css中 line-height继承的问题,如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

此时字体大小为40px;如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

大家可以看到上面代码的祖先元素设置为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，此数字会与当前的字体尺寸相乘来设置行间距。可以得到如下的效果。

代码：

关于css中 line-height继承的问题,如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

此时字体大小为24px;如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

效果：

关于css中 line-height继承的问题,如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；

此时字体大小为24px;如果line-height属性值有单位或百分比，那么继承的值则是换算后的一个具体的px级别的值；