Why is there space under the image in this code?

Question

I have the following code and it allows red to jump from element a. Why is this. I would expect the element to only expand to the size of the content, but it looks like it is slightly larger than that. See the code 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 explain why this place exists in EVERYTHING (I mean this is a block level element ... what is its purpose in the first place) ... unlike attempts to get rid of him. Thanks

Answer 1

The img element is inline by default. Inline elements act like text, and by default, vertical-align: baseline . This means that the bottom of the image matches the bottom of the text. Note that the lowercase p or g is below the bottom of the vertical alignment of the text. You can fix this by adding vertical-align: bottom OR display: block .

Answer 2

He does this because it is an inline element. Change display type

 img { display:block; } 

Answer 3

because the image is the inline element by default. Add display: block to your img rule and see.

Answer 4

In your case, you need to add display: block, but in the image tag instead of the link tag. add

 img { display:block; }