Extra padding on linked images (in every broswer)

Question

Hello, 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 and 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;
}

Answer 1

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;
}

Answer 2

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.