为什么overflow：hidden为inline-block元素添加额外的高度？ [英] Why does overflow: hidden add additional height to an inline-block element?
问题描述
在此示例中 ...
<body>
<div>
<div>foo bar</div>
</div>
</body>
CSS
CSS
body, html, div {
height: 100%;
margin: 0;
}
div div {
display: inline-block;
overflow: hidden;
}
为什么 overflow：hidden 导致垂直滚动条？此外，为什么这个高度不归因于页面上的任何内容？这就像一个看不见的边缘。
Why does overflow: hidden cause a vertical scrollbar? Additionally, why is this height not attributed to anything on the page? It's like an invisible margin.
所有元素的100％高度是故意的。在理论上，这应该导致最内部的div扩展以满足视口。它的确！ ...只要 overflow：hidden 不存在，为什么？
The 100% height of all the elements is intentional. In theory, that should cause the inner-most div to expand to meet the viewport. And it does! ...so long as overflow: hidden is not there, Why?
推荐答案
额外高度与 vertical-align：baseline 和 vertical-align：bottom 。 下降线。这就是看似随机的5个额外的像素来自哪里。如果字体大小是10倍大，这个差距也将是10倍大。
The extra height is the same height as the height difference between vertical-align: baseline, and vertical-align: bottom. The "descender line". That's where the seemingly random "5 extra pixels" comes from. If the font size is 10 times as large, this gap will also be 10 times as large.
此外，看起来当 overflow：hidden c> 不是 ， inline-block 元素的基线是其最后一行文本的基线。
Also, it seems that when overflow: hidden is not there, the inline-block element has its baseline as the same baseline of its last line of text.
这让我相信 overflow：hidden 强制 inline-block 元素位于元素的底部。即使没有文本， inline-block 元素的父级为下降行保留空间。在问题中给出的例子中，不容易看到，因为 inline-block 元素的父元素 height：100％。因此，为下行线路保留的额外空间会从父级div溢出。
This leads me to believe that overflow: hidden forces the baseline of the entire inline-block element to be at the bottom of the element. Even though there is no text there, the parent of the inline-block element reserves space for the descender line. In the example given in the question, it cannot be easily seen since the parent of the inline-block element has height: 100%. So, instead, that extra space reserved for the descender line overflows out of that parent div.
为什么这个空间仍然存在，即使没有文本吗？我认为这是因为 inline-block 创建一个内联格式化上下文，这是什么导致这个空间。如果这个元素是块，它只会在遇到内联元素或文本时创建此内联格式化上下文。
Why is this space still there, even though there's no text? I think that's because the inline-block creates an inline formatting context, which is what causes this space. Were this element to be a block, it would only create this inline formatting context once it encounters an inline element or text.
这只是一个理论，但它似乎解释了它。它也解释了为什么@Jonny Synthetic的答案工程：添加overflow：hidden到父隐藏额外的下降线。
This is just a theory, but it seems to explain it. It also explains why @Jonny Synthetic's answer works: adding overflow: hidden to the parent hides that extra descender line.
感谢 @ Hashem Qolami 给我这个理论的jsbins。
Thanks to @Hashem Qolami for the jsbins that gave me this theory.
这篇关于为什么overflow：hidden为inline-block元素添加额外的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
