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/

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 基本框 CSS假定每个元素都会生成一个或多个矩形框,这称为元素框。各元素框中心有一个内容区(content are...
    exialym阅读 4,284评论 0 2
  • 参考1.line-height12.line-height23.line-height34.line-height...
    鸿鹄飞天阅读 3,777评论 0 0
  • 离开这里(?)许久,大家可能没有人认识我,但是我希望成为大家的朋友。 我 一个天生想法太多的人,打开微信看到一篇文...
    晚安木子阅读 2,720评论 1 3
  • 姥爷的每日一抱(4.4日) 一大早宝宝小姨回学校了,上午姥姥出门了,我们三个在家,外面风大,依旧在院子里面...
    左左右右麻麻阅读 1,553评论 0 0