title: CSS - How to remove unwanted margin between elements?
body: <p>This seems to be a common problem but none of the solutions I found have worked for me.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="c/lasrs.css" type="text/css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;img src="i/header1.png"&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
                 Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
                 massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
                 bibendum at, posuere sit amet, nibh.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>body {
      min-width: 950px;
      background-color: #FFFFFF;
      color: #333333;
  }
  
  .header {
      width: 950px;
      height: 171px;
      margin: 0px auto;
      padding: 0px;
      background-color: #CCCCCC;
      position: relative;
  }
  
  .content {
      width: 950px;
      margin: 0px auto;
      padding: 0px;
      background-color: #E3EEF9;
      position: relative;
  }
  </code></pre>
  
  <p>I deliberately broke the image path and set a background colour for the <code>.header</code> div so that I could see if they were touching. This is what my page looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/W70sy.png" alt="page example"></p>
  
  <p>As you can see I've tried setting the padding and margins on both <code>divs</code> to 0. </p>
  
  <p><strong><em>Why is there still a gap?</em></strong></p>