两行基线的距离
内联元素p元素的高度是由行高决定的
没有两行哪来的行高？
由于继承性 行高无处不在
内容区域高度只与字体大小相关
simSam字体下
line-height = 字体大小+行间距
行高支持一下属性值：
假如当前font-size12px
normal 默认值 与浏览器和字体相关 crome浏览器下 normal值= 字体大小/100 = 0.12
inherit
length 12px 直接设置
number 当设置为3 则 行高为36px
percent 50% 12*50%=6px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .Number{ font-size:100px; line-height: 150%;/*100px*150%=150px 此方法获取的行高将继承给子元素 30px*/ } .Number>p{ font-size:44px; } .Percent{ font-size:100px; line-height: 1.5;/*100px*1.5=150px 在子元素当中还会计算一次*/ } .Percent>p{ font-size:44px;/*44px*1.5=66px */ } </style> </head> <body> <div class="Number"> <p>根据自身文字大小计算行高</p> <p>根据自身文字大小计算行高</p> </div> <span style="display: block;width:100%;height:1px;background:red"></span> <div class="Percent"> <p>根据自身文字大小计算行高</p> <p>根据自身文字大小计算行高</p> </div> </body> </html>
原文：https://www.cnblogs.com/webcyh/p/11333140.html