overflow:hidden on inline-block adds height to parent

css, height, html, overflow

Solution

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

Problem

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?

Original source

Related problems