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

        
                      

              相关标签:
       
      

Answer 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.

Answer 2

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

Answer 3

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.

Answer 4

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