CSS — vertical-align for inline-block element

vertical-align specifies the vertical alignment of an inline or table-cell box. The default value is baseline which means the baseline of the parent box. Normally, the baseline of the inline-block is the baseline of the last line box (see reference) in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

Line box

In example 1, the baseline of the line box is the invisible line underlining the text at the bottom. It is obvious to see that red box is aligned with the baseline of the line box, though the line box is taller than it because of the taller height of the green box. Change vertical-align of blue box to top, blue box aligned to the top. When inline boxes exceeds the width of the line box, they are distributed into vertically-stacked line box which is, in example 1, where box 4 and 5 are.

overflow property

Box 6 has overflow property of computed value other than visible, and we see that the 5px bottom margin edge is aligned with the baseline, if we inspect it with developer tools.


vertical-align line box — see 9.4.2

Originally published at codepen.io.