css problem with font-size and <img>

by mikkelbreum

HTML

<p><b>Image causing parent to add space for font-size (in webkit/Safari)</b><br>...uncomment 2nd line in css to see it disappear</p><hr>

<p>div with image (parent too high - unwanted space below image)</p>
<div class="outer"><img src="http://placehold.it/300x100" width="300" height="100"></div>
<hr>
<p>div with div (parent is not bigger than child)</p>
<div class="outer"><div style="background:url(http://placehold.it/300x100) no-repeat; width:300px; height:100px"></div>

CSS

div { font-size: 100% }

/*
div { font-size: 0 }
*/

.outer{ background-color: red }
.inner { background-color: blue }