Newsletter emails – how to remove image spacing

This isn’t anything new, lets just get that out of the way. But it is a problem I’ve encountered numerous times. It’s that moment when you’ve designed a nice looking HTML email, but the images in your newly constructed email have grown invisible shadows!

How to remove image spacing

The appearance of gaps underneath images in Hotmail, GMail and Yahoo! is still an issue. It’s also been well-covered by many of our friends and partners in the email world. For designers and marketers new to the quirks of creating HTML emails, here’s a quick overview:

No matter what you decide to call them, the result is still the same: about 2 – 3px of space appearing under images in your HTML email. These gaps really be seen where the layout consists of several images sliced apart and pieced back together in a table-based design:

What you don't want, image spacing in your HTML emails

What you don’t want!

This originally appeared in Hotmail viewed in Firefox, the issue seems to be slowly spreading to all browsers and most webmail providers. Since then, gaps have appeared in both Mac and PC versions of all modern browsers (IE, Firefox,  Safari, Opera and Chrome) when used to view emails sent to Hotmail, Gmail and Yahoo! accounts.

And yes, this is fixable! Depending on your coding style and the ESP or mailing software you use, there are a couple of ways to do this.

Using an inline style

Your first option is the most time-consuming, but it’s also the most reliable when used consistently. This involves adding style=”display: block” to each <image> tag in your HTML, like so:

<image style="display:block;" src="/image/path/jpg" alt="text">

Using an embedded style

Rather than manually adding the fix to each <image> tag, you can also include the following in the beginning of your HTML:

Using an embedded style is only an option if your ESP moves embedded styles inline, or you use another premailer tool that converts embedded styles to inline styles. This is because Gmail will remove embedded CSS from the <head> of your HTML, making the fix useless in that client when applied with embedded styles.

Using a style block at the start of your HTML will not solve all your problems

For the fix to work properly across all email clients, it’s crucial that style=”display: block” is added to each affected image using inline CSS;

Ah, this is better.

Ah, this is better. Display:block applied.

When choosing to include an embedded style and rely on an inline conversion tool, be aware that there are some cases where adding style=”display: block” to every image in your email is not desirable. One example is an inline block image.

Modern web browsers are using stricter DOCTYPEs, and this exposes the fact that images are inline elements by default in these DOCTYPEs. Treating images as inline elements results in the bottom of the image to be aligned with the baseline of the surrounding text (the baseline is an imaginary line where most letters of the alphabet sit when written in a straight line).

Browsers have begun treating images like text with the assumption that they will be used alongside each other. This leaves a small amount of space underneath each image to help text and images line up properly.

When you add style=”display: block” to each image, you’re telling the browser to stop treating the image like text or an inline element, and instead push the image down into the invisible ‘baseline’ space underneath as a block-level element.

This article at the Mozilla Developer Network explains the issue in much more detail, which I’m sure you’ll find useful.

Happy coding!

2 Comments

  1. Harvey Fisher says:

    So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Leave a Reply

Your email address will not be published. Required fields are marked *