溢出时容器上方和下方的css神秘空白：Hidden用于内联块 [英] CSS mystery white space above and below container when overflow: hidden is used on an inline-block

问题描述

当我使用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：Hide并避免此额外空格？

推荐答案

您看到的神秘空格是因为您将div-div设置为内联-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

这篇关于溢出时容器上方和下方的css神秘空白：Hidden用于内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！