Extra padding under link with image inside

Every once in a while i run into this crazy issue. I have an image inside a link like so:

<a href=”link”>

<img src=”source”/>

</a>

I am trying to add a caption with a background color on top of the image, but for some reason there is an extra 4px or so at the bottom that doesn’t come from any css that i use.

To get rid of the problem I finally found a post on stackoverflow that helped me fix it.

You just assign the img this css

img{vertical-align:bottom;}

That fixes it.

http://stackoverflow.com/questions/3407292/how-come-there-is-4px-of-extra-padding-appearing-under-my-a-element

Leave a Reply