当溢出：隐藏在内联块上使用时，容器上方和下方的 CSS 神秘空白

当我使用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/ http://jsfiddle.net/8ErHQ/2/

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

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

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

你看到的神秘空白是因为你制作了 divinline-block 和内联元素将调整为文本基线，为“j”和“g”等下行字母（“低垂”的字母）留出空间。

您可以通过设置来避免该问题vertical-align对其他事物的价值baseline（这是默认的），就像middle:

.field {
    vertical-align: middle;
}

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

...或者只是避免使用inline-block (float: left;相反，例如）

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