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 时：

 

1.  
   body{ font-size:14px; line-height:1.5; }
2.  
   h1{ font-size:26px; }

实际结果为：

body的行高为14*1.5=21px

h1的行高为26*1.5=39px

 

例2：当line-height:150% 时：

 

1.  
   body{ font-size:14px; line-height:150%; }
2.  
   h1{ font-size:26px; }

实际结果为：

body的行高为14*150%=21px

h1的行高为直接继承body的行高，为21px

 

 

转载地址：

http://www.cnblogs.com/mguo/p/3161277.html