10

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;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Justine
  • 1,808
  • 5
  • 26
  • 36
  • Would like to see these images you are using for the CSS background images. In your example it seems you are explicitly putting 11px padding on the bottom of .movie, so if your shadow image does not line up, perhaps your shadow is less than 11px? – babtek Aug 22 '10 at 03:29

7 Answers7

22

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;
}
Ian Yates
  • 231
  • 2
  • 5
12

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.

user3051858
  • 388
  • 4
  • 5
  • 1
    This works well. In fact 'middle' or 'bottom' will also work as vertical-align, as long as it's not 'baseline'. 'baseline' reserves some space below the element for the descender (e.g. the tail of the y), which can end up as the unwanted "padding". – jox Dec 28 '14 at 22:28
0

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

Community
  • 1
  • 1
Daniel Del Core
  • 3,071
  • 13
  • 38
  • 52
0

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

user1270392
  • 2,981
  • 4
  • 21
  • 25
0

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;
}
Nick Pyett
  • 3,338
  • 1
  • 23
  • 27
  • That isn't the case. The padding is where the shadow thing is - and it's exactly same heigh as the shadow image so that isn't what causes the problem. The extra padding is applied on `a` element, not anything else. – Justine Aug 20 '10 at 18:29
0

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.

Ken
  • 184
  • 1
  • 2
  • 16
  • Yes, I've tried resetting the padding as well. `a:visited` doesn't work either. Weirdly enough, I remember the same issue from some previous projects as well. – Justine Aug 23 '10 at 10:34
0

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/

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270