line-height: 2和line-height: 200%有什么区别?

答案为：
line-height: 2 表示单行文本的行高为它本身的两倍
line-height: 200% 表示单行文本的行高为系统默认字体的200%
在继承性上：
对父元素设置了line-height: 2后，父元素的子元素会继承line-height: 2这个属性，子元素的行高都是自身高度的2倍，是相对大小，子元素的字体大小不同，行高也会不同；
对父元素设置了line-height: 200%后，父元素的子元素会继承系统默认字体的200%，是一个固定的值，是固定大小，子元素的字体大小不同，行高都是固定某个值；

实际写代码验证下，看看对不对

浏览器：chrome（Chrome的默认字体大小为16px）

代码如下：

  
  
  


  

    line-height应该是他本身字体16px的3倍
  

  

    line-height应该是系统默认字体16px的200%
  

页面效果

image

CSS中line-height: 3;盒模型查看

image

去掉样式line-height: 3;看看

image

CSS中line-height: 200%;盒模型查看

image

去掉样式line-height: 200%;看看

image

继承性

对父元素设置line-height：2；

image

image

对父元素设置line-height：200%；

image

image

原文链接：https://www.jianshu.com/p/245b69518889