CSS "vertical-align: top" for to remove bottom space underneath inline-elements - How does that work?

Question

I know that browser add a little extra-space underneath inline-elements. For to accomodate the "tail" of characters like j, q, y.

One possibility to get rid of that space is to add a "vertical-align: top" property to the particular element:

figure img {
    vertical-align: top;
}

It works. I've tried that.

But I don't understand how and why it works.

I would expect the figure-container to keep it's size and the img put on the very top of the figure-container.

Why collapses the container instead?

Can someone explain me the behaviour which is used here to remove the undesired bottom-space?

https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/ — G.L.P, Oct 10 '16 at 09:30
This explanation may help: [**Mystery white space underneath image tag**](http://stackoverflow.com/a/31445364/3597276)... — Michael Benjamin, Oct 14 '16 at 03:35
and this: [**Why is my textarea higher up than its neighbor?**](http://stackoverflow.com/q/32414736/3597276) — Michael Benjamin, Oct 14 '16 at 03:36

score 0 · Answer 1 · answered Oct 10 '16 at 09:36

'vertical-align' does not affect the alignment of the addressed element. 'vertical-align' specifies how the inline elements should behave around the inline element. I think with the background knowledge you can also explain the further behavior.

I apologize for my knowledge of English in advance. : P

CSS "vertical-align: top" for to remove bottom space underneath inline-elements - How does that work?

1 Answers1