当我放置固定大小的显示 block 时 <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>
更新:
float 将是显示 block 元素的替代方案。完全有效，但是我想了解此示例中的显示 block 有什么问题。此外，对我来说它看起来不像是空白问题，因为这只会影响左/右边距(如果我错了请纠正我)。
最佳答案
因为你使用的是inline-block;，这是inline-block与floats不同的最好例子>/p>
.outer {
background: grey;
padding: 4px;
overflow: hidden;
}
.inner {
float: left;
background: cyan;
height: 40px;
width: 40px;
}
inline-block 留下 4px 边距的空白。
关于margin - 空跨度导致奇怪的边距/填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16188489/