line-height的继承问题

line-height 行高属性 控制行与行之间的间距

这个属性大家应该很熟悉，毕竟太常用了：

比如line-height：120% 和 line-heihgt：1.2 和line-height：1.2em 之间的区别

通常设置行高的方式有以下几种

normal 默认。设置合理的行间距。

number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

length 设置固定的行间距。

% 基于当前字体尺寸的百分比行间距。

inherit 规定应该从父元素继承 line-height 属性的值。

上面的区别主要在于line-height的继承

1. normal，父、子元素的行高由浏览器分别计算得到。

2. number，父、子元素根据各自的 font-size * number 计算得到行高。

3. length（带有 css 单位，如 em，px 等），子元素直接继承父元素的行高。

4. %，子元素直接继承父元素的行高，父元素的行高根据自己的 font-size 计算得到

因此想要line-height随着font-size缩放 早好采用数值

转载地址：点击打开链接