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



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?



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

Answered By – pixeline

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published