【转载】line-height:1.5和line-height:150%的区别

201 阅读1分钟

转载自:博客园/昵称:FEDeveloper

转载只为方便记忆用,之后可能会自己总结

line-height:1.5和line-height:150%的区别

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