当我将一个固定大小的显示块<span>元素放在<div>中时，它会在<div>的底部产生一个奇怪的边距或填充（我不知道）。当<span>元素中有文本时，一切都很好。这是什么原因？我怎样才能修好它？我测试了Firfox和Chrome。
Weird space http://picster.at/img/0/9/6/0968c75ddf29ad07cb71eee2cff472a9.png
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
</div>
<br>
<div class="outer">
<span class="inner"></span>
</div>
</body>
</html>
更新：
浮动将是显示块元素的替代方法。完全正确，但是我想知道这个例子中的显示块有什么问题。而且，对我来说，这看起来不像是空白问题，因为这只会影响左边/右边的边距（如果我错了，请纠正我）。
最佳答案
这是因为您正在使用inline-block;，这是inline-block与floats区别的最好例子
Demo
.outer {
background: grey;
padding: 4px;
overflow: hidden;
}
.inner {
float: left;
background: cyan;
height: 40px;
width: 40px;
}
inline-block留下4px空白。More Info
关于margin - 空跨度导致奇怪的边距/填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16188489/