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

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

上面接受的答案是正确的,但它没有给出我正在寻找的解释.@Alohci在评论中提供了一个很好的解释.

用几句话解释:

• vertical-alignis 的值baseline,因此子div与文本的基线对齐.

• 此文本基线与底线不同.它有点高,以容纳带下行符的字母:p,q,g.

• 这就是通过设置vertical-align:top来解决问题的原因.