Remove white space below image

Question

In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).

I've tried everything I can think of in Firebug with no luck.

How can I remove this white space?

Screenshot displaying white space below image

Here's a short and complete answer to this question: http://stackoverflow.com/a/31445364/3597276 — Michael Benjamin, Aug 08 '15 at 15:15
Easiest solution that doesn't not have the drawbacks of "display: block;" is to set the font size of the parent element to 0: — Davide Andrea, Feb 02 '20 at 22:24

score 604 · Accepted Answer · answered Oct 15 '11 at 00:21

604

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:

.youtube-thumb img { display: block; }

answered Oct 15 '11 at 00:21

robertc

74,533
18
193
177

13

Works, but not good. I have 4 images in a div and I want them `text-align: center` which won't work for blocks. – Salman A Oct 10 '12 at 21:30
26

Use `vertical-align: middle` if you need the image to play nicely with other things in the same box. In the rare case that the box contains several tiny images and no text, you might need to set `font-size: 0` on the containing box. – Brilliand Nov 01 '12 at 22:51
4

That works, but I used the other answer below from Hasan Gürsoy, since his answer doesn't cause problems with `text-align:center` and other issues that occur when changing the display property. – Doug S Nov 21 '13 at 17:03
It removes the gap but also makes it a block element. It's far from an assumption that changing the display type wouldn't have other drastic effects on a layout. – Nathan Hornby Apr 20 '18 at 09:59
@NathanHornby No assumptions are necessary, the layout was in the question (so was the code, originally) – robertc Apr 20 '18 at 10:35
oh no, 'block' will take the whole line – Dee Jan 29 '20 at 14:44

HasanG · Answer 2 · 2017-05-02T12:54:22.927

152

You can use code below if you don't want to modify block mode:

img{vertical-align:text-bottom}

Or you can use following as Stuart suggests:

img{vertical-align:bottom}

edited May 02 '17 at 12:54

answered Feb 06 '13 at 02:54

HasanG

12,734
29
100
154

32

`text-bottom` still leaves another pixel below the image in Chrome. I would suggest `vertical-align:bottom`. – Stuart P. Bentley Apr 11 '13 at 08:27
The first person to give this solution was Dave Kok, if you don't count my comment on the accepted answer (from a month earlier). – Brilliand May 03 '13 at 16:03
3

This should be the accepted answer, as it doesn't change the default display property of the img tag which might need to be 'fixed' in other places later! – DS. Jul 06 '13 at 23:17
2

Nvm, found why this works: http://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html – Benjamin Intal Jul 30 '13 at 03:16
Thank you! Although I went with the `vertical-align:bottom` version instead. – Doug S Nov 21 '13 at 17:03
2

When the image is particularly small (shorter than the line-height of the parent block element), vertical-align:bottom will leave a gap above the image. Hopefully it's clear that this is expected: http://developer.mozilla.org/en-US/docs/Web/CSS/line-height "On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element." – Zantier Sep 24 '14 at 15:46
Nicely done. You actually need to set the image to be inline-block too to make it work in most browsers. – Hooman Askari Sep 16 '15 at 14:16
This worked perfectly for me. Way better than display block. Thanks. – Jamie Carl Feb 03 '16 at 03:10
yeah, vertical-align:bottom works better – Dee Jan 29 '20 at 14:45

score 32 · Answer 3 · edited May 16 '15 at 15:16

32

If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.

edited May 16 '15 at 15:16

Salman A

262,204
82
430
521

answered Dec 14 '12 at 09:44

Dave Kok

892
9
19

Nicely done. You actually need to set the image to be inline-block too to make it work in most browsers. – Hooman Askari Sep 16 '15 at 14:16

score 32 · Answer 4 · answered Dec 06 '15 at 04:20

I've set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of

1) Maximum flexibility

2) No weird behavior

The accepted answer here of

img { display: block; }

which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.

1st, 2nd, and 3rd place are all a toss-up between these three solutions:

1) The solution given by @Dave Kok and @Hasan Gursoy:

img { vertical-align: top; } /* or bottom */

pros:

All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Very efficient.

cons:

In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img's parent (a bit strange).

2) Setting font-size: 0; on the parent element:

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

Since this one [kind of] requires vertical-align: top on the img, this is basically an extension of the 1st solution.

pros:

All display values work on both the parent and img.
No very strange behavior; any siblings of the img fall where you'd expect them to.
Fixes the inline whitespace problem for any siblings of the img.
Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can't see the parent anymore.

cons:

Less efficient code.
This assumes "correct" markup; if the img has text node siblings, they won't show up.

3) Setting line-height: 0 on the parent element:

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.

pros:

Behaves like the first two solutions on all display combinations except when the parent and img have `display: inline`.

cons:

Less efficient code.
In the case of both the parent and img having `display: inline`, we get all sorts of crazy. (Maybe playing with the `line-height` property isn't the best idea...)

So there you have it. I hope this helps some poor soul.

score 10 · Answer 5 · answered Jun 25 '13 at 00:12

10

I found this question and none of the solutions here worked for me. I found another solution that got rid of the gaps below images in Chrome. I had to add line-height:0; to the img selector in my CSS and the gaps below images went away.

Crazy that this problem persists in browsers in 2013.

answered Jun 25 '13 at 00:12

ZivBK1

101
1
4

1

Yep, `line-height: 0;` is what worked for me too. It's still alive and well in 2015. – VirtualWolf Oct 30 '15 at 06:33
This "problem" persists because it's not a bug. It's just how the inline-formatting context works. – benface Oct 11 '18 at 02:40

score 7 · Answer 6 · answered Apr 23 '13 at 08:29

7

Had this prob, found perfect solution elsewhere if you dont want you use block just add

img { vertical-align: top }

answered Apr 23 '13 at 08:29

Andrew

71
1
1

score 5 · Answer 7 · answered Jul 16 '12 at 15:48

5

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

answered Jul 16 '12 at 15:48

Brynner Ferreira

1,527
1
21
21

score 0 · Answer 8 · answered Jun 27 '15 at 04:34

As stated before, the image is treated as text, so the bottom is to accommodate for those pesky: "p,q,y,g,j"; the easiest solution is to assign the img display:block; in your css.

But this does inhibit the standard image behavior of flowing with the text. To keep that behavior and eliminate the space. I recommend wrapping the image with something like this.

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>

score 0 · Answer 9 · answered Oct 15 '11 at 00:16

0

Give the height of the div .youtube-thumb the height of the image. That should set the problem in Firefox browser.

.youtube-thumb{ height: 106px }

answered Oct 15 '11 at 00:16

Mahesh

34,573
20
89
115

Remove white space below image

9 Answers9

Linked

Related