Two lines from the baseline
The height of inline elements p element is determined by the height of the rows
No two rows where's the line height?
Because of inherited high sexual activity everywhere
Only highly relevant to the content area font size
simSam font under
line-height = line spacing, font size +
Line-height property supports the following values:
If the current font-size12px
Under normal Default Font associated with the browser and the browser crome normal font size = value / 100 = 0.12
inherit
length 12px directly
When the number is set to three lines 36px height
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>
