Question

I am coding a simple HTML e-mail and I am experiencing strange behaviour in gmail and Outlook 2003 and 2007. There is a white space below all images. My inline styling for images looks like this:

border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;

All styling is taken from MailChimp HTML code and should avoid inconsistencies. Do you have any experiences with this? Images are inside table td markup. Table cells have cellspacing and cellpadding set to 0 as well. Here is a screenshot of the problem: http://cl.ly/EnFt/o

Answer 1

Images are inline by default. That small gap you’re seeing is the space for descenders such as those on ‘g’ and ‘q’. To combat the problem, you need to explicitly set all images to be block elements, like this:

<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />

You can use a service like premailer, which lets you add this style in the head of your HTML file, and will automatically place it inline for you.

It’s worth mentioning that display:block; will, obviously, mean that each image should be in a separate td or similar: images that need to display side-by-side will be pushed down below each other.