css – 为什么overflow：hidden添加额外的高度到inline-block元素？

HTML

<body>
  <div>
    <div>foo bar</div>
  </div>
</body>

CSS

body,html,div {
  height: 100%;
  margin: 0;
}
div div {
  display: inline-block;
  overflow: hidden;
}

为什么会溢出：隐藏导致垂直滚动条？此外,为什么这个高度不归因于页面上的任何内容？这就像一个看不见的保证金.

所有元素的100％的高度是有意的.在理论上,应该使最内部的div扩展到满足视口.而且它！ …只要溢出：隐藏不在那里,为什么？

额外的高度与vertical-align：baseline和vertical-align：bottom之间的高度差相同. “下降线”.这就是看似随机的“5个额外的像素”来自哪里.如果字体大小是10倍,这个差距也将是10倍.

此外,似乎当overflow：hidden不存在时,inline-block元素的基线与其最后一行文本的基线相同.

这使我相信overflow：hidden将整个内联块元素的基线强制到元素的底部.即使在那里没有任何文本,内联块元素的父项保留下行线的空间.在问题给出的例子中,由于内嵌块元素的父元素的高度为100％,所以不容易看到.所以,相反,为下行线保留的额外空间从父级div溢出.

为什么这个空间仍然存在,即使没有文字？我认为这是因为内嵌块创建一个内联格式化上下文,这是什么导致这个空间.如果这个元素是一个块,它只会在遇到内联元素或文本时创建这个内联格式化上下文.

这只是一个理论,但似乎解释了这一点.这也解释了为什么@Jonny Synthetic的答案有效：添加溢出：隐藏给父母隐藏额外的下降线.

感谢@Hashem Qolami给了我这个理论的jsbins.

相关文章