title: Top Margin pulls down the parent as well
body: <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav&gt;&lt;ul class='container'&gt;
          &lt;li&gt;&lt;a href='#'&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;Categories&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;How to Play&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/nav&gt;
      &lt;article id="showcase"&gt;
          &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;/article&gt;
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hjYzs/" rel="nofollow">http://jsfiddle.net/hjYzs/</a></p>
  
  <p>What's wrong? <code>&lt;h1&gt;</code>'s margin seems to be pulling its parent <code>article</code> down too.</p>