Extra padding on linked images (in every browser)

Question

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

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

Answer 2

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.