 <p>Change the <code>img</code>s <code>display</code> to <code>block</code> </p> <pre><code>a { display:inline-block; } a img { display:block; } </code></pre> <p>See this <a href="http://jsfiddle.net/TLBEx/2/">jsfiddle</a></p> <p>So what does it do? The image inside the link has a default <code>display</code> of <code>inline-block</code>. The a you set to <code>display:inline-block</code>. It's the combination of the two in combination with whitespace inside the <code>a</code> element, that does the problem.</p> <p>You can simulate with two nested <code>inline-block</code> <code>div</code>s which has the dimensions set only on the inner one. <a href="http://jsfiddle.net/TLBEx/4/">http://jsfiddle.net/TLBEx/4/</a></p>