Categories
Content Marketing Create HTML Email Marketing Web Development

How to Create HTML Email: Getting Rid of the Annoying Spaces in Gmail

The most frequent question I get about HTML email is, “How do I get rid of the annoying white spaces in Gmail?”  If you’ve been trying to figure out that problem, you’re in good company and I’m here to help!

View the original tutorial where I created the HTML email.

What Tools Do I Need?

In this series, I am using the following tools:

There are many other tools, some of which are Open Source, that can be used to accomplish the same thing without the significant software investment.  The concepts are basically the same as with the tools in this series.  Get the concepts down and the specific tool doesn’t matter quite as much!

Watch the video tutorial (also, see the detailed post below!)

Most of the searches for a fix will tell you to add the style=”display:block;” to each image in your HTML code.

style display block

While that might work for HTML that is comprised completely of graphics, if you’re combining graphics and text you’re likely to continue to have the same problem.

annoying-space

Here’s a fix:

First go ahead and update all your images with the style=”display:block;” attribute.  See the example code above.  This is good practice, however it may not work in all situations.

Next, do the following:

Add style=”line-height:0″ to the table itself.

table line height

But if you’re combining images and text, then you’re going to have a problem.  This style will apply to the entire table creating problems for the cell with text.

not what we had in mind

To fix this, go to the specific text cell in the table and reset the line height to style=”line-height:1″ for that specific cell.

text cell line height

This overrides the line height attribute set at the table level for the text cell.  The result is that the email appears the way you intended in Gmail!

no-more-spaces

That’s it.  Now, go make an HTML email and sell something!

22 replies on “How to Create HTML Email: Getting Rid of the Annoying Spaces in Gmail”

Hey, I am trying to create an email signature but every time I go to paste into google I get the white lines. I tried what you did in the video but no luck. I have tried using dreamweaver, brackets, and sublime. Nothing is changing and for the life of me I cannot figure out why. I could really use the help.

Hi Ed,

I have have followed all what you have described yet still have spaces when I paste my html in both gmail and yahoo.

Can you please help me identify to see where I actually went wrong.
I suspect it could be the presence of the spacer images. However, when I take them out, they distort the whole table even though I clear the table heights and widths.

Find below the HTML code:

Thanks for the post and sorry for the late reply as I’ve been traveling. I pulled up your links, but they looked like nice webpages. If you haven’t solved the problem you can email me a copy of your html email and I can view it in Gmail and see if I can see where you might be having a problem.
Cheers,
Ed

Hi
can someone please help me with the white space problem and three images going lower than they should (which happened when i deleted an unused row). i am new and confused to this. I have tried adding “style=”display:block;”> to my images. many thanks in advance

Hi Ed,

Firstly awesome tutorials. I’m stuck trying to make my html email work one mobiles?
Could you help at all?

heres the code.

E-Flyer-Phlebas




Hi Joe, I took your HTML code and uploaded/tested it. It worked fine on both an iPhone and iPad. I emailed you a copy of what it looks like on my iPad.

Thanks for all the info regarding eliminating the whitespaces around images.
I’ve tried using the style=”line-height:0″ where the table is defined, followed by style=”display:block;” for each image, however still get the whitelines above (or below?) my images (appears with the lines both in the Design page as well as when exporting to HTML).

FYI I created a 600 px wide file in PS CS6, created 3 slices, then imported each of the 3 images into DW where I had created a 600px table of 3 rows, 1 column.

I’d appreciate it if you could look at the code below and let me know where I’m going wrong…
iMac 2011, Safari

Hi,

Your tutorials are awesome, it’s really useful!

Although I still have a problem with the white spaces. It worked for the height, but not for the width. I tryed different code, but it didn’t worked

Also in hotmail it’s still a mess with big white spaces.

Good question. The whole point of creating the HTML email is to reference images that are stored somewhere on the Internet (generally in some place you control) so they can be viewed by anyone anywhere. Unless your local machine is set up as a webserver and is connected to the Internet, you can’t let someone view the images unless you actually attach them to your email, which defeats the purpose of HTML and also causes all kinds of problems with a variety of email clients. You can code your HTML to point to local images, of course, but the recipient can’t see them because they generally can’t access your local machine. That’s why getting the URL correct is so important. Make sense?

The path is correct. I have tested on several browsers and on different machines. I uploaded manually without using dreamweaver. I t seems to work fine when I send one email from Apple Mail to another Mac I have. The email is received and the images show up, but when that email is forwarded the images are lost. I would send you the links but I don’t want it to show if the comments are made public.

thanks. K.

I have followed everything and I am satisfied with the results. However, I have other issues.
1/ I can create an email from the safari browser and email it.
However, upon forwarding it looses all the images and I see red x.
2/ creating this in MS Outlook just doesn’t work. Inserting it using Outlook 2000 as text in the body of an email doesn’t seem to work.

I have uploaded the images and the html file onto my server and as i said it works fine on my safari, but when forwarding i loose it all.

Thanks.

Hi Conrad and thanks for the comment. The red “x” in place of the images almost always indicates a problem with the path of the image file. The best way to see if your images are accessible to others it to type just the path of the image in a browser. If it doesn’t show up, then the path may be wrong or it maybe as simple as a typo.

It’s possible that when you’re pulling the HTML file up in Safari, it is referencing images on your local machine instead of the web server where you have your images loaded. The default for Dreamweaver ( and even Photoshop if using it to create images from slices and HTML code) is to create image paths locally. If you don’t change them to reference the uploaded image, they won’t show up.

For a bit more on that, please have a look at my post called “How to Create HTML Email.”

On the Outlook issue, see the video on “Sending HTML Email Using Outlook and Mac Mail.” Not sure why you’d be having trouble with that since I’ve been using Outlook to send HTML email for a number of years. Be sure to select Insert As Text and don’t just attach the file. I think I have a version of Outlook 2000 on another computer, so I’ll try and play around with it and see if I have any problems.

Leave a Reply

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