title: table-cell > img extra 4px space
body: <p>The question is similar to this one: 
  <a href="https://stackoverflow.com/questions/7733264/extra-spacing-after-an-a-tag-img-tag">Extra spacing after an A Tag/img tag?</a>
  But the solution was to apply display:block to the image but if I do it, my vertical-align is lost. </p>
  
  <pre><code>&lt;div class="main" style="display:table;"&gt;
      &lt;div style="display:table-cell;"&gt;
          &lt;img src="http://www.w3schools.com/images/w3logotest2.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>fiddle: <a href="http://jsfiddle.net/Zf34P/" rel="nofollow noreferrer">http://jsfiddle.net/Zf34P/</a>
  img height: 32px, parent div height: 36px. Can't find a way to remove it and keep <code>vertical-align: middle; text-align: center;</code> so the image is centered. These 4 pixels are really annoying when the image height is set to window's height via JavaScript so scrollbar appears. Any ideas how to remove it? Thanks. </p>