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 CODE：

<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 内嵌 -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

Answer 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/

Answer 3

在.w50和.w100语句中加上一个保证金值。可能还有其他修正，但这是我能想到的最快。

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

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

3 个答案: