Why is there space under the image in this code? [duplicate]

Question

I have the following code, and it allows the red to show through from the a element. Why is this. I would have expected that the a element would only expand to the size of the contents but it looks like it's a bit bigger than that. See the codepen here http://codepen.io/anon/pen/soqEz.

HTML

<a href="#"><img src="http://placehold.it/150x150" /></a>

CSS

a{
  background: red;
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
img {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

EDIT: I see the answers below ... but can anyone also explain why the space is there AT ALL ( I mean given that it's a block level element ... what's the purpose of it in the first place ) ... as opposed to trying to get rid of it. Thanks

Answer 1

The img element is inline by default. inline elements act as text and default to a vertical-align: baseline. This means that the bottom of the image aligns with the bottom of your text. Notice that a lower case p or g goes below the bottom of the vertical text alignment. You can fix it by either adding vertical-align: bottom OR display: block.