overflow：hidden on inline-block向父级添加height [英] overflow:hidden on inline-block adds height to parent

问题描述

我有一些嵌套的div

/ p>

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

并且孩子有显示：inline-block和overflow：hidden

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

它会像这样渲染：

您可以注意到，父级高于5px孩子。

额外的高度来自哪里？

以下是示例： http://jsfiddle.net / w8dfU /

编辑：
我不想删除display：inline-block或overflow：隐藏，这是一个简化的例子来说明问题，但在我真正的布局，我需要他们两个。
我只是想了解为什么这个额外的高度出现。它是指定的地方，它应该是这样的吗？

解决方案

在构建水平滑块时遇到了这个问题。我使用vertical-align：top在我的inline-block元素上修复它。

  ul {
 overflow-x：滚动; 
 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; 
} 
  

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?

解决方案

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

这篇关于overflow：hidden on inline-block向父级添加height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！