Question

我正在对float和inline-block进行一些测试，我注意到它们之间存在差异。

正如您从THIS EXAMPLE所看到的那样，如果我使用display:inline-block，则div之间会有一点差距，但如果我使用float:left，它会按预期工作。

请注意我正在使用Eric Meyer的Reset CSS v2.0。

是因为我做错了，或者这是inline-block行为的方式（在这种情况下它不是很可靠）。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>How padding/margin affect floats</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</body>
</html>

CSS（不重置）

#wrap{
  width: 600px;
    margin:auto;
}

.square{
    width: 200px;
    height: 200px;
    background: red;
    margin-bottom: 10px;
    /*display: inline-block;*/
  float:left;
}

Answer 1

我正在对float和inline-block进行一些测试，我注意到了是他们之间的区别。

无论什么资源给你的暗示他们可能不是相同的是误导。它们是completely different things。

div之间有一点距离

那不是margin。这是由HTML中的div之间的换行符产生的空间。一种解决方案是仅删除换行符，另一种解决方案是在包含元素上设置font-size: 0（从而导致不渲染空格）。

请注意，如果您使用第二种方法，则需要在内部font-size上设置另一个div，否则将无法呈现其中的文字。

希望有所帮助！

Answer 2

这是因为空间。如果在容器元素上设置font-size: 0，则间隙将消失（确保重置内联块上的font-size。）

Answer 3

提供父元素font-size: 0;。

然后，将孩子的font-size设置为font-size: 12px（或设计规定的任何大小），如下所示：

#wrap{
    font-size:0;
}
.square{
    font-size:12px;
}

Answer 4

据我了解，内联块元素将显示与其他内联对象相同的自动伪边距间距。而浮动元素被视为与文档的对象流完全独立（因此，没有恼人的间隙）。

抱歉，我无法给出更详细的答案，但这绝对是我以前摔跤过的事情。对于它的值，对于内联块元素，间距应该可靠烦恼，如果你正在尝试一切，你只需要记住补偿那些伪边距包含在父元素中而不会被推送到下一行。

css inline-block vs float

4 个答案: