Let's talk about line-height-north wind and snow blowing

Let's talk about the line-height-north wind blowing snow line-height style. I believe everyone will not be unfamiliar with it. We often use it to center the text up and down. In this case, there will be no problems, however, if you are not familiar with this attribute, you may step on some pitfalls. Today, I personally tried it and summarized several features of line-height.

First, line-height has the following standards:

1. line-height: normal; // equivalentWriting Method 5The fixed value is 1.2. The default value is normal.

2. line-height: inherit; // parent element inheritance

3. line-height: 24px; // values are assigned by Pixel px or em.

4. line-height: 150%; // line-height = font-size * 1.5

Line-height: 1.5; // line-height = font-size * 1.5

First, let's take a look at the possible problems in writing 3,

It can be seen that the parent element sets the Row height. If the child element does not set the row height, the child element uses the line-height set by the parent element, regardless of the font-size of the element, will not change the row height, so when the child element font-size> parent element line-height, there will be overlapping fonts or other styles you don't want to see.

Second, though the four and five statements look the same, they are different, such:

Both of the above methods will achieve the same effect,

Increase the font of child elements by one factor

Set the Row Height by percentage,Line-height = 200% * parent element font-size = 32pxThe height of the child element row does not change, resulting in overlapping fonts.

If the row height is set by a number, the Row Height of the child element is recalculated,Line-height = parent element Row height factor * child element font-size = 2*64 = 128px;The height of the child element row is recalculated.

The following points are summarized:

Line-height is inherited ).

When line-height is set to the pixel value px or em, the line-height of the parent element is used for its child element (child element with no Row height set, the font size does not change the Row Height.

Line-height determines whether the row height is recalculated based on the method set by the parent element. That is, the difference between 4 and 5.

I believe you have a certain understanding of line-height.