overflow:hidden on inline-block adds height to parent

Question

I\'m certain this has been asked before in some form or other, but I just can\'t find an answer..

I have some nested divs

Answer 1

The accepted answer above is correct, but it does not give the explanation I was looking for. A good explanation was provided by @Alohci in his comment.

Explanation in a few words:

• The value for vertical-align is baseline, therefore the child div is aligned with the baseline of the text.

• This text baseline is not the same as the bottom line. It's a bit higher up, to accommodate letters with descenders: p, q, g.

• This is why the problem is fixed by setting vertical-align:top.