The Vertical-align and line-height in CSS

Line-height is defined as the distance between the two baselines, that is, the height of a row (literally, the row height), and the value of Vertical-align, Top,middle,baseline,bottom, as the name implies is the line alignment, midline alignment, Baseline alignment, Bottom line alignment (a bit different from the English one), enter an X, the bottom of which is the baseline, and the middle is the midline. (Midline is not the vertical center, but the center of X, using vertical-align:middle alignment, the surface is vertical horizontal alignment, there will actually be a pixel-level gap, you can set the font-size to 0, so that the various lines are coincident, in the vertical center of the place)

For the Inline-block element, when there is no inline box in the normal flow of the row box, and its overflow is set to visible, margin is used as the baseline, if aligned with the default Vertical-align:baseline, will be aligned with margin. This alignment produces the effect of self-test corresponding to the meaning of vertical-align can be deduced, not to repeat.

For the various effects produced by Line-height,vertical-align, understand its original meaning, it is not difficult to understand the effect of the next, write down the vertical-align:text-top and text-bottom usage.

Vertical-align:middle and so on, alignment depends on the line is in the sibling element, with uncertainty (but can also be based on this feature to create the effect of the upper and lower block offset), and Text-top, Bottom are aligned according to the font-size of the parent element to determine the position of the various lines.

Not to be continued ...

The Vertical-align and line-height in CSS