White space appears when using margin-top

Question

I am attempting to use margin-top push a container down relative to its parent container. However, when trying to do so, a white gap is appearing between the parent div and the preceeding div (see screenshots). I am wondering if anyone has a solution for this.

Answer 1

Use padding, not margin if the issue is that the background isn't getting filled in. This applies to the parent div, not the child:

http://jsfiddle.net/tmd4thpa/

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