Overflow: hidden on inline block adds height to parent

Question

I am sure that this was asked earlier in one form or another, but I just cannot find the answer.

I have several nested divs

<div class="parent"> <div class="child">A</div> </div> 

And the child has a display: inline-block and overflow: hidden

 .parent{ background-color:red; } .child{ background-color:green; display:inline-block; overflow:hidden; } 

And it turns out like this:

You may notice that the parent is 5px taller than the child.

Where does the extra height come from?

Here is an example: http://jsfiddle.net/w8dfU/

Edit: I don’t want to remove the display: inline-block or overflow: hidden, this is a simplified example to illustrate the problem, but in my real layout I need both of them. I just want to understand why this extra height appears. Is it somewhere indicated that this should be so? Is this a consequence of some other css function?

Answer 1

I had this problem when building a horizontal slider. I installed it with vertical alignment: on top of my inline elements.

 ul { overflow-x: scroll; overflow-y:hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } ul&::-webkit-scrollbar { display: none; } li { display: inline-block; vertical-align: top; width: 75px; padding-right: 20px; margin:20px 0 0 0; } 

Answer 2

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

An explanation in a few words:

• The vertical-align value is equal to baseline , so the child div aligns with the base text of the text.

• This baseline of the text does not match the baseline. It is a little higher to place letters with descenders: p, q, g.

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

Answer 3

This is the extra space coming from the overflow:hidden class of the Child class. Remove this property and check, and if you really wanted to use the overflow:hidden property, then use a negative margin for the child class. You can remove this extra space.

Answer 4

 .child{ background-color:green; display:inline-block; overflow:hidden; vertical-align: top; }