title: CSS block elements creating gaps between div elements
body: <p>I'm having difficulties with spaces between div blocks:</p>
  
  <pre><code>&lt;div id="maincontentwrapper" &gt;
    &lt;img src="images/content-top.png" alt="main content border image" border="1" /&gt;
    &lt;div id="maincontent" &gt;
      &lt;div id="pagecontent"&gt;
         &lt;h1&gt;Mission Statement&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;img src="images/content-bottom.png" alt="main content border image" /&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>This is creating a page with a full bordered image. All is well, however as soon as I enter a block level element inside of pagecontent, e.g. the header as shown, then a gap appears between the content-top.png image and the maincontent div.</p>
  
  <p>If I change the first character to be inline, e.g. a non-breaking space or simply a letter, then the gap does not appear.</p>
  
  <p>This is the (relevant) css:</p>
  
  <pre><code>img {
   margin: 0;
   padding: 0;
  }
  #maincontentwrapper { 
  }
  #maincontent {
   background-image: url('../../images/content-main.png');
   background-repeat: repeat-y;
   min-height: 300px;
   width: 757px;
  }
  #pagecontent {
   width: 625px;
   margin-left: auto;
   margin-right: auto;
  }
  </code></pre>
  
  <p>Thanks for any help</p>