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?

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