line-height继承规则

经测试,line-height的继承规则如下:
ps:本文中的”数字值“指的是"1px","normal","1em","1ex","1rem"等带有确切单位的值,“缩放因子"指的是"1","1.5"这种纯数字

  • 如果父元素使用的是line-height数字值或百分比值,那么子元素将会直接继承这个数字值或百分比的计算值 (e0, e1, e2)
    • 当子元素使用数字值重写自己的line-height时,子元素的line-height将是这个新的数字值(e0)
    • 当子元素使用百分比重写自己的line-height时,子元素的line-height将是这个百分比*自己的font-size(e1)
    • 当子元素使用缩放因子重写自己的line-height时,子元素的line-height将是这个缩放因子*自己的font-size(e2)
  • 如果父元素使用line-height缩放因子,那么子元素将会直接继承这个缩放因子(子元素的line-height将是这个缩放因子*自己的font-size),并且这个缩放因子会继续向下继承 (e3)

线上例子:https://jsfiddle.net/ndNovaDev/rbbwuowy/

你可能感兴趣的:(line-height继承规则)