The role of line-height in the article
When line-height is in the article, its main function is to adjust the distance between lines. The distance between lines is the value of line-height minus the value of font-size. When the value of line-height exceeds If the value of line-height is too large, it will also affect reading, so it is particularly important to adjust the appropriate value of line-height. The default value of line-height in browsers is generally 120%.
How to set line-height
To set line-height you can use px, em, % or a number:
Of course, px is generally not used, because the font is large or small, and if the line height is a fixed value, when the font size changes, the lines may overlap, or the spacing may become too large.
We can use % to dynamically adapt to changes in font size, and % will calculate the line height based on the font size. em and % are basically the same, 1em = 100%.
The last number usage is similar to %, such as line-height: 1.5 is equivalent to 1.5em, 150% of the size; but the difference is that when the nested tag inherits the parent's line height, the child tag will inherit 1.5, and then according to the font- size*1.5 dynamically calculates the row height, while % and em calculate the row height first, and then inherit the subtags, which makes the row height performance in the subtags inconsistent, and the rows may be crowded together.