title: CSS: Margin-top when parent's got no border
body: <p>As you can see in <a href="http://i30.tinypic.com/v4utxj.png" rel="noreferrer">this picture</a>, I've got an orange <code>div</code> inside a green <code>div</code> with no top border. The orange <code>div</code> has a <code>30px</code> top margin, but it's also pushing the green <code>div</code> down. Of course, adding a top border will fix the issue, but I need the green <code>div</code> to be top borderless. What could I do?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.body {
   border: 1px solid black;
   border-top: none;
   border-bottom: none;
   width: 120px;
   height: 112px;
   background-color: lightgreen;
  }
  
  .body .container {
   background-color: orange;
   height: 50px;
   width: 50%;
   margin-top: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;Top&lt;/div&gt;
  &lt;div class="body"&gt;
   &lt;div class="container"&gt;Box&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="foot"&gt;Bottom&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>