Line-height1.5 and line-height: 150% difference,

Line-height1.5 and line-height: 150% difference,
I. Differences

The differences are as follows:

• Line-height: 1.5 is directly inherited from the child element. The child element calculates its line-height based on its own font-size.
• When the line-height: 150% is set for the parent element, the line-height value is calculated, and the calculated value is inherited from the child element. The final value is inherited from the child element. In this case, the font-size of the child element has no effect on its line-height.

Ii. Example

For example, set the attribute of the parent element: font-size: 14px; line-height: 1.5; Set font-size: 26px for child;

Then the parent element is line-height = 14px * 1.5 = 21px, and the child element is line-height = 26px * 1.5 = 39px.

Parent element setting attributes: font-size: 14px; line-height: 150%; child setting font-size: 26px;

Then the parent element is line-height = 14px * 150% = 21px, and the child element is line-height = 21px of the parent element.

<! DOCTYPE html> <meta charset = "UTF-8"/> 
 

 
 
 
Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.