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

Posted 2023-03-06

【中文标题】溢出：隐藏在内联块上增加了父级的高度

【英文标题】：overflow:hidden on inline-block adds height to parent

【发布时间】：2013-12-17 02:55:27

【问题描述】：

我确定以前有人以某种形式提出过这个问题，但我就是找不到答案..

我有一些嵌套的 div

<div class="parent">
    <div class="child">A</div>
</div>

而且孩子有 display:inline-block 和 overflow:hidden

.parent
    background-color:red;

.child 
    background-color:green; 
    display:inline-block;
    overflow:hidden; 

它被渲染成这样：

您可以注意到父级比子级高 5 像素。

额外的高度从何而来？

这里是示例：http://jsfiddle.net/w8dfU/

编辑： 我不想删除 display:inline-block 或 overflow:hidden，这是说明问题的简化示例，但在我的实际布局中我需要它们。 我只是想了解为什么会出现这个额外的高度。是否在某处指定它应该是这样的？这是其他一些 CSS 功能的结果吗？

【问题讨论】：

我认为这篇文章将完全回答您的问题***.com/questions/9273016/…

只使用 inline 而不是 inline-block 你的问题就会解决jsfiddle.net/w8dfU/1

技术上的答案是overflow:hidden 移动了内联块的基线。默认情况下，line-box 的支柱被限制在与 inline-block 相同的基线上，因此 line-box 及其包含的 div 必须增加高度以包含支柱的下降部分。但是，Maksym Stepanenko 给出的链接中的最佳答案更清楚地解释了这个问题。

@MaksymStepanenko 谢谢你，这个问题的答案确实为我澄清了这个问题。

@Alohci 你的评论也很有帮助，如果你把它作为答案，我会接受它

【参考方案1】：

我在构建水平滑块时遇到了这个问题。我在我的 inline-block 元素上使用 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;

【讨论】：

确实，vertical-align:top 是解决方案。这是一个解释为什么：brunildo.org/test/inline-block.html

我非常讨厌 CSS。发生这种行为是绝对和完全荒谬的。感谢您的解决，我希望我们能够一起将 CSS 的创造者驱逐到最深的、无法逃脱的地狱。

这在 IE 上不起作用。有什么想法可以在那里解决吗？

【参考方案2】：

上面接受的answer 是正确的，但它没有给出我正在寻找的解释。 @Alohci 在他的comment 中提供了一个很好的解释。

解释几句话：

vertical-align 的值为baseline，因此子 div 与文本的基线对齐。

此文本基线与底线不同。它有点高，以容纳带有下降的字母：p，q，g。

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

【参考方案3】：

.child
    background-color:green; 
    display:inline-block;
    overflow:hidden; 
    vertical-align: top;

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或 如何 回答问题的额外上下文将显着改善其长期价值。请edit你的答案添加一些解释。

【参考方案4】：

这个额外的空间来自 Child 类的overflow:hidden。删除此属性并检查您是否真的想使用 overflow:hidden 属性，然后对子类使用负边距。您可以删除这个额外的空间。