溢出时上下容器的CSS神秘空白:隐藏用于内联块

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/

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

Answer 1

您看到的神秘空白是因为您使div成为内联块,并且内联元素被调整为文本基线,为下降器(字母"挂低")留下空间,如"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