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:
- Adobe Acrobat
(for exporting a PDF to an image)
- Adobe Photoshop
(for slicing and optimizing the images)
- Adobe Dreamweaver
(for cleaning up HTML and uploading to a webserver)
- Microsoft Outlook
(for emailing the HTML pieces)
- Apple Mail (for those who use Macs)
- A Webserver like Bluehost (to host your images and HTML file)
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.
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.
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.
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.
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.
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!
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
Thanku Sooo Much Sir ,, my problem has been solve”
Perfect solution for a crazy-causing problem! Thank you.
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
Couldn’t paste in the code it’s here:
https://docs.google.com/document/d/1OwwjKbwbE0HAWFaRkfzyYS_Bw2aZ9Bv1eBAr1XhGk5Q/edit
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.
After 3 hours looking I have finally found the solution! Thank you very much for sharing this!
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
I couldn’t see the code in my comment–will try again (see below):
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.
thank you!
how can images be displayed in html email even it is local files
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?
Hey there! I just wish to offer you a big thumbs up for the excellent information you’ve got right here on this post. I will be returning to your web site for more soon.
Thanks much for this series of tutorials. Now our emails are delivered without a long string of attachments listed at the top!
Thanks for the note Vince. I’m glad you found it helpful!
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.