Remove white space below image
CssImageWhitespaceBorderRemoving WhitespaceCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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; }
Solution 2 - Css
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}
Solution 3 - Css
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.
Solution 4 - Css
I've set up a https://jsfiddle.net/bowheart/8g784xt0/"><b>JSFiddle</b></a> 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 http://mor10.com/removing-white-space-image-elements-inline-elements-descenders/">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.
- 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 https://css-tricks.com/fighting-the-space-between-inline-block-elements/">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.
- 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
.
- Less efficient code.
- In the case of both the parent and img having
display: inline
, we get all sorts of crazy. (Maybe playing with theline-height
property isn't the best idea...)
So there you have it. I hope this helps some poor soul.
Solution 5 - Css
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.
Solution 6 - Css
Had this prob, found perfect solution elsewhere if you dont want you use block just add
img { vertical-align: top }
Solution 7 - Css
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
Solution 8 - Css
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 }
Solution 9 - Css
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>