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

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

回答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.

回答3:

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

回答4:

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.

回答5:

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/

回答6:

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

回答7:

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

来源：https://stackoverflow.com/questions/3532870/extra-padding-on-linked-images-in-every-browser

标签

html

css

image

hyperlink

padding