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

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

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

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

And it gets rendered like this:

You can notice that the parent is 5px higher than the child.

Where does the extra height come from?

Here is the sample: http://jsfiddle.net/w8dfU/

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

Teufert

I think This post will fully answer your question #9273516 – Electrician

just use inline and not inline-block and your problem will be solved jsfiddle.net/w8dfU/1 – Disembody

The technical answer is that overflow:hidden moves the baseline of the inline-block. The line-box's strut is, by default, constrained to sit on the same baselne as the inline-block, so the line-box, and its containing div must increase in height to contain the descender of the strut. But the top answer at the link Maksym Stepanenko gives explains the issue much more clearly. – Eula

@MaksymStepanenko thank you, the answers from that question have indeed clarified the issue for me. – Teufert

@Eula your comment was also very helpful, if you make it an answer, I will accept it – Teufert

@San, your idea does not work if you want to set a width to the child because inline elements don't allow a set width. – Choiseul

Use inline-flex; instead of inline-block and inline. – Bazluke

Answer 1

I had this issue when building a horizontal slider. I fixed it with vertical-align:top on my inline-block 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;
}

Pretermit

Indeed, vertical-align:top was the solution. Here is an explanation why: brunildo.org/test/inline-block.html – Teufert

I hate css so much. Its absolutely and completely nonsensical that this behavior happens. Thank you for this work around, and I hope together that we can banish the creators of css to the deepest inescapable relams of hell. – Necrosis

This doesn't work on IE. Any ideas how to solve it there? – Naumann

Answer 2

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.

Teufert

Answer 3

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

Divisible

Although this code may answer the question, providing additional context regarding why and/or how it answers the question would significantly improve its long-term value. Please edit your answer to add some explanation. – Harpist

Answer 4

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

Sandstorm