溢出：隐藏在内联块上会增加父级的高度

Question

我确定以前曾以某种形式或其他方式询问此事，但我找不到答案..

我有一些嵌套的div

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

孩子有显示：内联块和溢出：隐藏

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

它会像这样呈现：

您可以注意到父母比孩子高5px。

额外高度来自哪里？

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

修改 我不想删除display：inline-block或overflow：hidden，这是一个简单的例子来说明问题，但在我的真实布局中我需要它们。 我只是想明白为什么会出现这个额外的高度。是否指定它应该是这样的？这是其他css功能的结果吗？

Answer 1

构建水平滑块时遇到此问题。我使用vertical-align：top修复了我的内联块元素。

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

Answer 2

上面接受的answer是正确的，但它没有给出我正在寻找的解释。 @Alohci在comment中提供了一个很好的解释。

解释用几句话说：

• vertical-align的值为baseline，因此子div与文本的基线对齐。

• 此文字基线与底线不同。它有点高，以容纳带有下行符的字母：p，q，g。

• 这就是设置 vertical-align：top 解决问题的原因。

Answer 3

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

Answer 4

此额外空间来自Child类的overflow:hidden。删除此属性并检查是否确实要使用overflow:hidden属性，然后对子类使用负边距。您可以删除这个额外的空间。