[FIXED] Why does unchecking the vertical-align property on this image change the list instead of the image?

Issue

Why does unchecking the vertical-align property on this image change the list instead of the image?

Checked:

Unchecked:

Solution

Inline elements share an invisible guide called a linebox. The linebox guides the vertical positioning of the elements inside of it, relative to each other. Because it's encapsulating a relationship between these inline elements inside, the box itself will be also affected by those elements.

When the vertical-align of the image is set to "middle", the linebox is shifted to the center of the parent container. That's because the image element is larger than the linebox, therefore the linebox is the one that moves when the property changes (If the image was smaller than the linebox, the image would have moved and not the linebox).

Removing the vertical align from the image causes it to default back to "baseline", and when the baselines of the linebox and image are realigned, the linebox now sits at the bottom of the parent container which shifts the rest of the content it contains down there too.

Here's a really good read on the whole thing (Much more useful than the MDN docs)

Answered By - relic

Answer Checked By - Mary Flores (PHPFixing Volunteer)