The Line-height attribute value is the difference between a percent and a number product factor:
This section does not describe the specific usage of the Line-height attribute, only the difference between the parameter as a percentage and the number product factor.
For basic usage of line-height, refer to the line-height attribute in-depth section.
When setting the value of the Line-height property to a percentage and a number product factor, such as 200% and 2 can set the Line-height property value to twice times the font size within the current element, is not the feeling of using two ways parameter values a bit superfluous, actually not.
Look at the following code example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">#top{width:300px;background:#CCC;Line-height:2;font-size:12px;margin:5px;}#top. Inner{font-size:18px;}#bottom{width:300px;background:#CCC;Line-height:200%;font-size:12px;margin:5px;}#bottom. Inner{font-size:18px;}</style></Head><Body><DivID= "Top"> <Divclass= "inner">Ant Tribe One</Div></Div><DivID= "Bottom"> <Divclass= "inner">Ant Tribe II</Div></Div></Body></HTML>
In the above code, the top and bottom two line height is obviously there is a gap, the following describes the difference between the two.
When the percentage is used, the current element will be calculated according to the font size of the line-height, this time the line is fixed, the following sub-element inherits this fixed row height, such as the above code, the top outer city div by percentage calculation travel height of 24px, Then its child element inherits this fixed value, and no longer calculates it based on the font of the child element. When a number product factor is used, the child element inherits this factor, so the row height is calculated based on the child element's font size.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=15900
For more information, refer to: http://www.softwhy.com/divcss/
Line-height attribute value is the difference between a percent and a number product factor
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
