参考链接
line-height 的继承
取值
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即 number 为当前 font-size 的倍数。(推荐) |
| length | 设置固定的行间距（单位）。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
注：normal 一般认为它是 1 ~ 1.2，取决于用户端。
- 如果父级的
line-height属性值有单位或百分比，那么子级继承的值则是换算后的一个具体的px级别的值； - 而如果父级的
line-height属性值没有单位，则子级会直接继承这个“数值”，而非计算后的具体值，此时子级的line-height会根据本身的font-size值重新计算得到新的line-height值。 - 除非子元素显式设置了
inherit以外的值，否则默认会从父元素处继承。
| 设置方式 | line-height | 计算后的 line-height | 子元素继承的 line-height |
|---|---|---|---|
| inherit | 父元素的 line-height 值 | 不用计算 | 父元素的 line-height 值 |
| length | 20px | 不用计算 | 20px |
| %(font-size: 16px) | 120% | 自身 font-size (16px) * 120% = 19.2px | 继承父元素计算后的 line-height 值 19.2px，而不是120% |
| normal(font-size: 16px) | 1.2(一般) | 自身font-size (16px) * 1.2 = 19.2px | 继承1.2，line-height = 子元素自身 font-size(32px) * 1.2 = 38.4px |
| number(font-size: 16px) | 1.5 | 自身font-size (16px) * 1.5 = 24px | 继承1.5，line-height = 子元素自身 font-size(32px) * 1.5 = 48px |
若有收获，就点个赞吧
0 人点赞
