title: How to remove unwanted vertical spacing between divs
body: <p>I've run into a bit of a snag whilst developing the frontend for a website. I'm competent with CSS, but not fantastic. Anyway, I've created a jsFiddle <a href="http://jsfiddle.net/YM_Industries/eLbUU/" rel="noreferrer">here</a> that illustrates my problem.</p>
  
  <p>On each page of my website, at the top of the content section, I have a banner image. I wish to put a two colour divider seperating this banner from the content. (As is shown in the mockup my designer gave me: <a href="https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg" rel="noreferrer">https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg</a>)</p>
  
  <p>I'd like to do this in pure CSS+HTML, without just chucking an image in. Anyway, I've done so using the following code:</p>
  
  <pre><code>&lt;img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"&gt;
  &lt;div&gt;
      &lt;div style="width:30%; height: 10px; display: inline-block; background: #6C210C"&gt;&lt;/div&gt;&lt;div style="width:70%; height:10px; display: inline-block; background: #E5C697;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(Please forgive the inline CSS, it's just for demonstration purposes. Also, unfortunately, if I put the second div on a newline and indent it, it creates whitespace)</p>
  
  <p>The issue I'm having is that there is a large gap between the divider and the image. I have tried adding margin: 0px and padding: 0px to all the relevant elements, and the whitespace is still there.</p>
  
  <p>Could someone help me out please?</p>
  
  <p>Thanks,
  YM</p>