Div and Image Margin/Padding

Can anyone tell me why the below CSS produces extra margin below the image? It should just add a 5开发者_如何学JAVApx padding around the whole thing and it works fine with text. Any ideas?

div#somediv {
margin: 0;
padding: 5px;
}

div#somediv img {
margin: 0;
padding: 0;
}

<div id="somediv">
  <img src="someimage.jpg" />
</div>

Try making the image a block-level element:

div#somediv img
{
    display: block;
    margin: 0;
    padding: 0;
}