Unwanted Padding on image area

Question

http://www.milknhny.co.uk/blog/

Ive wrapped my image in a black box, with the following css code:

.thumbnailwrap {
background: #000000;
display: table;
}

For some reason there is a VERY small black area at the base of the image which i cannot see where the padding is coming from.

Please can i ask advice where to look? Thanks

score 1 · Answer 1 · answered Jun 26 '13 at 18:33

1

Create a rule for your images like:

.thumbnailwrap img {
    vertical-align:top;
}

answered Jun 26 '13 at 18:33

j08691

204,283
31
260
272

score 0 · Answer 2 · answered Jun 26 '13 at 18:30

0

If you inspect the element you will notice that the black line is coming from

.thumbnailwrap { background: #000}

Change this in your CSS and you should be good to go!

answered Jun 26 '13 at 18:30

Matt

2,500
1
16
26

score 0 · Answer 3 · answered Jun 26 '13 at 18:32

0

if u dont need background property.

   .thumbnailwrap {
    background: #000000; --> Remove this from your CSS. I tested and it works
    display: table;
    }

answered Jun 26 '13 at 18:32

NiRUS

3,901
2
24
50

The background is clearly there to show where the image will be loaded as it is loading. Another use for it would be for transparent PNGs, giving them a background (I have used this effect in the past), but that's not the case here. – Niet the Dark Absol Jun 26 '13 at 18:43

score 0 · Accepted Answer · answered Jun 26 '13 at 18:41

Inline elements (or elements that may be displayed inline, such as tables, inline-blocks, images, etc.) are always aligned with respect to the baseline. This is the line drawn across the bottom of the letters in this sentence. Occasionally though letters may drop below the baseline, as in this one (y, g, p). For this reason, the baseline and the bottom line are not the same - otherwise the tails of letters would collide with the heads of the ones below.

This is why there will be a small gap underneath images in this way.

Personally, I like to add img{vertical-align:bottom} to my CSS. I can always override it for specific images (such as middle where useful) and this aligns the image to the bottom line.

Unwanted Padding on image area

4 Answers4