本文介绍了溢出时容器上方和下方的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
这篇关于溢出时容器上方和下方的css神秘空白：Hidden用于内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！