问题描述
在 ...
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.
感谢给我这个理论的jsbins。
Thanks to @Hashem Qolami for the jsbins that gave me this theory.
这篇关于为什么overflow：hidden为inline-block元素添加额外的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！