How come there is 4px of extra padding appearing under my <a> element?

Question

H3LLO,

For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.

Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.

To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.

Any ideas on how to get rid of a element's extra bottom padding?

Thanks
Adam

Answer 1

add vertical-align:bottom; to your img css properties.

Answer 2

I'm not positive why it occurs, but you could try YUI Reset to fix it.