我确定以前曾以某种形式或其他方式询问过,但我找不到答案.
我有一些嵌套的div
A
并且孩子有显示:内联块和溢出:隐藏
.parent{ background-color:red; } .child{ background-color:green; display:inline-block; overflow:hidden; }
它会像这样呈现:
您可以注意到父母比孩子高5px.
额外高度来自哪里?
以下是示例:http://jsfiddle.net/w8dfU/
编辑: 我不想删除display:inline-block或overflow:hidden,这是一个简单的例子来说明问题,但在我的真实布局中我需要它们.我只是想明白为什么会出现这个额外的高度.是否指定它应该是这样的?这是其他一些css功能的结果吗?
上面接受的答案是正确的,但它没有给出我正在寻找的解释.@Alohci在评论中提供了一个很好的解释.
用几句话解释:
vertical-align
is 的值baseline
,因此子div与文本的基线对齐.
此文本基线与底线不同.它有点高,以容纳带下行符的字母:p,q,g.
这就是通过设置vertical-align:top来解决问题的原因.
构建水平滑块时遇到了这个问题.我在我的内联块元素上用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; }