html - 使用 margin-top 时出现空白

Question

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

Answer 1

如果问题是背景没有被填充，则使用填充，而不是边距。这适用于父 div，而不是子 div:

http://jsfiddle.net/tmd4thpa/

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