Remove white space below image

css image whitespace border removing-whitespace
Ryan picture Ryan · Oct 15, 2011 · Viewed 201.4k times · Source

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

Answer

robertc picture robertc · Oct 15, 2011

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

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame" style="height: 25px;"> &…

Read More
CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, height and width are already specified. I added CSS rule for images: …

Read More