Space below images in Firefox and email newsletters
One thing that is consistently presented to me by other web designers and users is space below images and usually in Firefox, but it can also happen in email newsletters. You will usually notice it when you need images to vertically butt up against each other. This results in a white line or whatever the background colour is set too appearing between two vertically stacked images. Fear not, the fix is extremely easy and you have two good options.
Display block and line height
The first option is to use a display block on the images causing the problem. The reason you have this space below images in the first place is because images are inline elements. This means Firefox is reserving space below the image for descenders. A descender is the text in some lower case letters that extends below the baseline of the font. This occurs in letters like g and p. Changing your images to block removes this reserved space because a block level element is not treated the same way as an inline element.
This fix will not always be good enough as you may need images to line up horizontally. Changing images to block level elements will cause a break after each image. You could try floating them, but an easier way would be to set the line height. Give the container element a line-height of 0.1 em. Using this method will remove your spacing issues, but remember that you can only use images in this container. Using text will obviously have undesirable results.
Examples
Block method:
.containerDiv img {
display:block;
}
Line height method:
.containerDiv img {
line-height:0.1em;
}
Green August 14, 2009 at 9:44 am
Another thing to note is that if you’re coding emails, thanks to Outlook 2007+, you’re restricted to using tables for most of your layouts, so you can make your images block-level elements, as long as they’re fully contained in a table cell.
Remember, floats don’t float, in Microsoft’s email world.
CBloss August 14, 2009 at 11:08 am
I second what Green says. It gets even better, they say NOT to use div tags. According to Microsoft, Outlook’s not supposed to support line-height either, but so far from what I see, it works. I don’t know about the other email peps. I will agree with what you said about “display:block” though. That’s saved me. I found that out on another blog.
Salman October 26, 2012 at 6:10 am
You could use the following CSS:
img { vertical-align: bottom; }
And here is the explanation:
http://911-need-code-help.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html
This way the images will align with the bottom instead of baseline (which rests few pixels above the bottom edge). That way the images will remain inline-blocks, you can add multiple images in the same container, center align them, mix them with text, etc.