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.
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.
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.
Originally published at codepen.io.