CODEWITHSUNDEEP
htmlcssimagehyperlinkpadding
Justine
Justine

Reputation: 1908

Extra padding on linked images (in every browser)

extra padding

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

Upvotes: 10

Views: 8343

Answers (7)

user3051858
user3051858

Reputation: 387

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.

Upvotes: 12

user1270392
user1270392

Reputation: 3111

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

Upvotes: 0

Daniel Del Core
Daniel Del Core

Reputation: 3221

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

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98786

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/

Upvotes: 0

Ian Yates
Ian Yates

Reputation: 231

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

Upvotes: 22

Ken
Ken

Reputation: 184

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.

Upvotes: 0

Nick Pyett
Nick Pyett

Reputation: 3408

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

Upvotes: 0

Related Questions