使用margin-top时会出现空白区域

Question

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

Answer 1

如果问题是背景没有填写，请使用填充，而不是保证金。这适用于父div，而不是孩子：

http://jsfiddle.net/tmd4thpa/

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