8

我正在做一些测试，float并且inline-block我注意到它们之间存在差异。

正如您从这个示例中看到的那样，如果我使用display:inline-blockdiv，它们之间会有一点余量，但如果我使用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;
}
4

4 回答 4

11

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

无论资源给您暗示它们可能不相同的含义都是误导性的。它们是完全不同的东西。

div 之间有一点边距

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

请注意，如果使用第二种方法，则需要font-size在 inner divs 上设置另一个，否则将不会呈现其中的文本。

希望有帮助！

于 2012-11-26T09:03:32.063 回答
7

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

于 2012-11-26T09:03:54.800 回答
2

给父元素font-size: 0;。

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

#wrap{
    font-size:0;
}
.square{
    font-size:12px;
}
于 2012-11-26T09:03:42.723 回答
0

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

抱歉，我无法给出更详细的答案，但这绝对是我之前遇到过的问题。对于它的价值，间距对于内联块元素应该是可靠的烦人，如果你试图在不被推到下一行的情况下尝试包含在父元素中的所有内容，你只需要记住补偿那些伪边距。

于 2012-11-26T09:15:42.550 回答