溢出时容器上方和下方的css神秘空白:Hidden用于内联块
当我使用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
相关文章