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

一、区别

区别体现在子元素继承时，如下：

• 父元素设置 line-height:1.5 会直接继承给子元素，子元素根据自己的 font-size 再去计算子元素自己的 line-height 。
• 父元素设置 line-height:150% 是计算好了 line-height 值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置 font-size 就对其 line-height 无影响了。

二、举例

区别体现在子元素继承时，如下：

line-height:1.5

• 比如

  • 父元素设置属性：font- size:14px; line-height:1.5
  • 子元素设置：font-size:26px;

• 此时

  • 父元素：line-height = 14px * 1.5 = 21px
  • 子元素：line-height = 26px * 1.5 = 39px

line-height:150%

• 比如

  • 父元素设置属性：font-size:14px; line-height:150%
  • 子元素设置：font-size:26px;

• 此时

  • 父元素：line-height = 14px * 150% = 21px
  • 子元素：line-height = 父元素的line-height = 21px