Line-height Calculation of CSS

Line-height represents the row height, which is the distance between the two lines of text baselines.

inline box (inline elements)--Anonymous inline boxes (content area/text/inline box), including, in turn, a row box, multiple behaviors more than one row box accumulates.

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

Half-line spacing, which is half the line spacing.

Row height = content area + line spacing, (under some fonts, the content area height is equal to the font size, such as SimSun Arial)

The height of block-level elements and the size of the font, no relationship, is a row of high-open

The height of the inline element is open by the size of the font, and the height of the line set does not affect the element heights.

Three, two lines of text, set the row height, the lower the value, because the content area is the same size, the smaller the line spacing, there will be overlapping, the row height of the minimum is 0. Vice versa.

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

When row height is set, the content area height is constant (typically determined by font-size and font-family), and the half-line spacing is increased/decreased (minus half-line spacing) to the upper and lower sides of the content area, respectively

(when viewing span, IE has an offset value of 41 because it does not calculate a 1px border of P)