title: Space at bottom of div containing image
body: <p>For this fiddle, why is there a space at the bottom of <code>div#imageDiv</code>? </p>
  
  <p><a href="http://jsfiddle.net/7Knyx/1/" rel="nofollow">JSFiddle</a></p>
  
  <pre><code>&lt;div&gt;
  &lt;div&gt;
  &lt;div&gt;
      &lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" /&gt;      
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="text"&gt;&lt;div id="inner"&gt;text goes here&lt;/div&gt;&lt;/div&gt;        
  
  html {
    line-height: 1.5em;
  }
  #text {
    background-color: grey;
    margin-top:-7px;
  }
  </code></pre>
  
  <p>​</p>
  
  <p>​</p>