Extra padding on linked images (in every browser)

I'm having a problem with getting extra padding on link element with an image inside. It happens in all browsers, Safari, Firefox, IE.

I have a reset stylesheet applied so there shouldn't be any extra margins on padding but upon inspection it's clear that the a element has some extra bottom padding from nowhere. Any ideas?

Here's the markup an开发者_如何学JAVAd CSS:

<div class="movie"><a href=""><img src="img/video01.jpg" alt="" /></a></div>

div.home-col .movie {
padding: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}

div.home-col .movie img {
padding: 4px;
margin: 0;
border: 1px solid #d0d0d0;
}

Try adding the following line to your link element: line-height: 0;

div.home-col .movie a {
display: block;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
line-height: 0;
}

sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility ..... answer: only add "vertical-align: top;" to img tag inside a tag.

The background image for the movie class will appear at the bottom of both the box and padding applied to it, so use the following if you need the 11px space at the bottom of the image.

div.home-col .movie {
margin: 0 0 11px 0;
background: url(../img/bg-shadow-movie.png) bottom no-repeat;
}

Did you try adding padding to:

div.home-col .movie a {
display: block;
padding: 0 0 0 0;
background: url(../img/bg-zoom-movie.png) 50% 5px no-repeat;
}

If not possibly you could add a:visited to test it to see if anything changes.

Are you sure that’s all the CSS? I can’t see the problem you’re describing on this test page: http://www.pauldwaite.co.uk/test-pages/3532870/

Hello i had the same problem and i found that if you vertically align the image to the bottom it will be fixed.

Image inside div has extra space below the image

Adding style="padding:0px;" solved the problem for me.