溢出时容器上方和下方的 CSS 神秘空白：隐藏用于内联块答案

【问题标题】：CSS mystery white space above and below container when overflow: hidden is used on an inline-block溢出时容器上方和下方的 CSS 神秘空白：隐藏用于内联块
【发布时间】：2014-01-25 03:21:05
【问题描述】：

当我使用overflow: hidden 时，这些容器周围会出现顶部和底部边距。我真的不明白为什么会这样。我正在寻找一种解释来帮助我更好地理解 CSS。

代码如下：

CSS 代码：

#container {
    border: 2px solid black;
    overflow: auto;
}
.field {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 5px;
    border: 5px solid #FC0;
    line-height: 1.5em;
    overflow: hidden;
}
.w50 {
    width: 50%;
}
.w100 {
    width: 100%;
}

HTML 代码：

<div class="w50" id="container">
    <div class="field w50">
        <input type="text" size="100" value="input field that overflows @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@">
    </div>
    <div class="field w50">content</div>
    <div class="field w100">content</div>
</div>

如果我不使用overflow: hidden，容器没有顶部和底部边距，但我确实有溢出问题。

http://jsfiddle.net/8ErHQ/2/

如果我使用overflow: hidden，容器（显然）有顶部和底部边距，但我的溢出问题消失了。

http://jsfiddle.net/8ErHQ/1/

有没有办法使用溢出：隐藏并避免这个额外的空白？

【问题讨论】：

标签： overflow css

【解决方案1】：

您看到的神秘空白是因为您制作了 div inline-block，并且将内联元素调整为文本基线，从而为像“ j”和“g”。

您可以通过将vertical-align 值设置为baseline（这是默认值）以外的值来避免此问题，例如middle：

.field {
    vertical-align: middle;
}

http://jsfiddle.net/8ErHQ/3/

...或者只是避免使用inline-block（例如float: left;）

欲了解更多信息，您可以查看https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

【讨论】：

Vertical-align: middle 只有在 display: table-cell 内才可用。 phrogz.net/CSS/vertical-align
@Cam 它也适用于 inline 元素；）再次阅读我的答案（如果您仍然看不到我的意思，请阅读链接）
完美！这正是我所需要的。但我原以为边框会低于基线……事实上，Firebug 不会选择屏幕的那个区域，这使得它更有趣。
@xec - 是的，差不多就是这样。在 CSS 2,1 规范第 10 章的最底部，它说“'inline-block' 的基线是它在正常流程中的最后一个行框的基线，除非它没有流入行框或如果它的 'overflow' 属性具有除 'visible' 以外的计算值，在这种情况下，基线是底部边距边缘。”。这意味着 overflow:hidden 以您所说的方式“包含”基线。
找到了一个很好的解释为什么会发生这种情况：stackoverflow.com/questions/9943503/…

【解决方案2】：

您还可以选择另一种方法。使用没有溢出的：隐藏；您可以使用这种方法来解决您的溢出问题。

将您的 css 设置为此。

   .field input {
       width: 100%;
    }

并将您的输入字段更改为此。

         <input type="text" size="auto" value="input field that overflows @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"> //Size was changed to AUTO

这就是你得到的。 http://jsfiddle.net/cornelas/8ErHQ/5/

【讨论】：

您也可以一起删除 size 属性：jsfiddle.net/8ErHQ/6 - <input type="text"> 元素上的 size 属性值指的是字符而不是像素。
从长远来看是的。我担心的是有一百个输入字段。这将使这种方法不是一个好方法。但不同。

【解决方案3】：

在您的 .w50 和 .w100 语句中添加边距值。可能还有其他修复方法，但这是我能想到的最快的。

    .w50 { margin: 0 0 -7px 0; width: 50%; }
    .w100 { margin: 0 0 -4px 0; width: 100%; }

【讨论】：

-1 这是一个可怕的想法——不同的字体大小意味着负边距需要另一个 px 值。查看我的答案（半小时前发布）