title: Get rid of space underneath inline-block image
body: <p>How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?</p>
  
  <p><a href="http://jsfiddle.net/dJVxb/2/" rel="noreferrer">http://jsfiddle.net/dJVxb/2/</a></p>
  
  <p><strong>HTML:</strong>   </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" &gt;                 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong>  </p>
  
  <pre><code>​#wrapper {
      background:green;
  }
  img {
      display:inline-block; 
      margin:0;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/31R79.png" alt="enter image description here">
  ​</p>