Removing spacing under the image

Question

HTML :

<div>
   <img src="http://static.jsbin.com/images/jsbin_16.png" />
</div>

CSS :

div { border:5px solid #000; }
img { border:1px solid red; }

Issue illustration :

My problem is the space under the image, I added black border to the div container and red border to the img to make it more demonstrative.

Demo :

JsBin

Answer 1

This happens due to img layout, just change it to display: block :

JSBin

Or change vertical-align property to top:

JSBin

Or set font-size: 0 to the div container :

JSBin

Or set line-height: 0 to the div container :

JSBin