line-height:1.5和line-height:150%

2021-07-08  本文已影响0人  十一点后不在线
  1. 给你个数,孩子自己算吧 line-height:1.5
    父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height。

2.老子说多大就是多大 line-height:150%
父元素设置line-height:150%是计算好了line-height值,然后把这个计算值给子元素继承,子元素继承拿到的就是最终的值了。
此时子元素设置font-size就对其line-height无影响了。

例1:当line-height:1.5 时:
body{ font-size:14px; line-height:1.5; }
h1{ font-size:26px; }
实际结果为:
body的行高为14*1.5=21px
h1的行高为26*1.5=39px

例2:当line-height:150% 时:
body{ font-size:14px; line-height:150%; }
h1{ font-size:26px; }
实际结果为:
body的行高为14*150%=21px
h1的行高为直接继承body的行高,为21px
上一篇 下一篇

猜你喜欢

热点阅读