Inline Element Changes Parent Size
The height of parent elements can change when an
inline-level element has the default value for
vertical-align, which is
baseline. This is because
baseline may result in the browser
adding extra space above and below the element to
align the baselines of the inline-level element and
its parent element, which can cause the parent to be
larger than expected. 1
Changing vertical-align from the
default value of baseline to
top or bottom both fix the
issue. 1