使用margin-top时出现空白间隙

Question

我试图使用margin-top将一个容器相对于其父容器向下推。但是，尝试这样做时，在父div和前面的div之间出现了白色间隙（请参见屏幕截图）。我想知道是否有人有解决方法。

- thebighoncho

---

为了吸引最好的答案，您需要创建一个简化问题的示例，并在此处发布该代码。能够重现问题是找到解决方案的重要步骤。 - Woodrow Barlow

使用 reset.css，看起来你为 Hero Message 的 tag 给了 margin。 - Vitorino fernandes

Answer 1

如果问题是背景没有填充满，请使用padding而不是margin。这适用于父级div，而不是子级。请参考：http://jsfiddle.net/tmd4thpa/

.container {
  background: purple;
  padding:20px;
}
.div {
  height:500px;
  background: red;
}
<div class="container">
  <div class="div"></div>
</div>

- austinthedeveloper

---

谢谢！这个完美地解决了问题。看了你的回答后，我感觉有点“傻眼”了。干杯！ - thebighoncho

Answer 2

这与边距折叠有关。如果您向容器添加一个非常小的顶部填充，则不会发生这种情况，因为它们会分开。不确定此处边距折叠的基本机制。

- khatara

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Neeraj