how to remove unwanted space in div wrapping an img?

how to remove unwanted space in div wrapping an img?

jsfiddle
I have:
HTML:
<div>
<img
src='http://upload.wikimedia.org/wikipedia/commons/7/70/Peace_dove_icon.svg'
width='50' height='50'>
</div>
CSS:
div{
display:inline-block;
position: relative;
margin: 0;
border: 0;
padding: 0;
overflow: visible;
}
but if you inspect the page you should hopefully see a seemingly arbitrary
5px extra on the bottom of the div tag.
how can I get rid of this?