title: css vertical gap between divs
body: <p>I know this is a common problem but I can't seem to find a solution that works.  I have a setup like this:</p>
  
  <pre><code> &lt;div id="wrapper"&gt;
    &lt;div class="content-area-top"&gt;&lt;/div&gt;
    &lt;div class="content-area"&gt;
     &lt;h1&gt;Title&lt;/h1&gt;
     some other text
    &lt;/div&gt;
   &lt;/div&gt;
  
  .content-area-top {
    height: 12px;
    width: 581px;
    background-image: url(images/content-top.jpg);
   }
  
  .content-area {
  margin-left: 10px;
  margin-right: 10px;
      background-color: #e9ecfd;
   }
  </code></pre>
  
  <p>The problem is that there is a gap between .content-area-top and .content-area.  the .content-area-top div is sized to contain a background image that gives me the rounded corners that I want.</p>
  
  <p>I know that issue comes form the fact that the H1 tag has a (browser default) top margin set (.67em), but I'm unwilling to set its margin to 0, and I don't see why its margin applies 'outside' its containing div.</p>
  
  <p>I'm using chrome on Mac, but firefox has the same issue.  This is probably some well-known fix, but I couldn't find a a solution specific to my case.</p>