overflow - 溢出时容器上方和下方的CSS神秘空白: hidden is used on an inline-block

Question

当我使用 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: hidden 并避免这个额外的空白？

Answer 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