Css line-height calculation

line-height represents the line height, that is, the distance between the baselines of two lines of text.

Line box box -> Inline box (inline element) -> Anonymous inline box (content area/text/inline box), contained in sequence, one line box per line, multiple lines multiple lines Line boxes accumulate.

Line spacing is the distance between two lines of text, from the bottom line of the first line of text to the top line of the second line of text.

Half line spacing is half of the line spacing.

Line height = content area + line spacing, (under some fonts, the height of the content area is equal to the font size, such as SimSun Song Dynasty)

1. There is no relationship between the height of block-level elements and the font size. They are supported by the line height

##2. The height of the inline element is expanded by the font size. The set line height does not affect the element height

#Three and two lines of text, set the line height, The smaller the value, the smaller the line spacing will be because the size of the content area remains unchanged, and overlap will occur. The minimum line height is 0. Vice versa.

Four, In a block-level container, the principle of vertically centering an inline element (it just looks centered, not actually centered) is:

When setting the row height, the height of the content area remains unchanged ( Generally determined by font-size and font-family), the half-line spacing increases/decreases (negative half-line spacing) to the upper and lower sides of the content area respectively

##                                                                                                                                                                                                                                      

##For more articles related to line-height calculation of Css, please pay attention to the PHP Chinese website!