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: enter image description here

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?

I think This post will fully answer your question http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward — Max Novich, Dec 01 '13 at 09:36
just use inline and not inline-block and your problem will be solved http://jsfiddle.net/w8dfU/1/ — San, Dec 01 '13 at 09:39
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. — Alohci, Dec 01 '13 at 10:08
@MaksymStepanenko thank you, the answers from that question have indeed clarified the issue for me. — stralsi, Dec 01 '13 at 10:37
@Alohci your comment was also very helpful, if you make it an answer, I will accept it — stralsi, Dec 01 '13 at 10:38
@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. — Hanna, Apr 02 '15 at 22:19

score 84 · Accepted Answer · answered Feb 10 '14 at 12:15

84

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;
}

answered Feb 10 '14 at 12:15

user3257701

856
7
4

6

Indeed, vertical-align:top was the solution. Here is an explanation why: http://www.brunildo.org/test/inline-block.html – stralsi Feb 11 '14 at 10:57
9

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. – B T Jul 25 '15 at 09:10
This doesn't work on IE. Any ideas how to solve it there? – Buzinas Apr 20 '16 at 05:07

score 15 · Answer 2 · edited May 23 '17 at 12:03

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.

score 2 · Answer 3 · answered Apr 18 '16 at 14:34

2

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

answered Apr 18 '16 at 14:34

Ying Yi

784
4
16

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. – Toby Speight Apr 20 '16 at 13:46

score -1 · Answer 4 · edited Dec 01 '13 at 09:53

-1

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.

edited Dec 01 '13 at 09:53

Mohsen Safari

6,669
5
42
58

answered Dec 01 '13 at 09:47

Nandu Hulsure

123
1
7

overflow:hidden on inline-block adds height to parent

4 Answers4

Linked