White space between images - hotmail / gmail / yahoo mail

Hi, I've tried every trick that I can find out there in order to get email clients to render my images without white space in between them to no avail.

Does anyone have any insight as to how I can remedy this?

The most popular suggestions have been:

style="display:block"  and/or a border="0"

though I've tried others as well.. align attribute, style for line-height, style for text size, etc.  Nothing works (all of these being inline styles of course).

I've done a simple test - a table with three rows.  In each row a single image of a block of color. They all break apart with white space in each web-based email client.

Any advice would be great.

roshodgekiss roshodgekiss, 3 years ago

Hi whatyouare, this is very curious - which email client(s) are you seeing spaces in? For table layouts, you may want to try adding table { border-collapse:collapse; }, plus ensuring <table cellpadding="0" cellspacing="0">.

If neither of these bring any satisfaction, feel free to post your code here and we'll do our best to get to the bottom of it all. :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
whatyouare, 3 years ago

Thanks for your reply!

This is happening to me in hotmail, gmail and yahoo mail.  Seems to happen in multiple browsers as well.

Should the table border collapse code be inserted as inline style?  I was under the impression that CSS would be stripped from most emails.

I experience the white space between images on company emails that I create.  Trying to find the culprit, I made a super easy little file consisting of only a table with three rows, an image inserted in each.  Sure enough, the images break in all of the email clients.  My original code, without applying a fix covered in my original post is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://www.armstrongteasdale.com/Marketing/TestRed.gif" width="600" height="97" /></td>
  </tr>
  <tr>
    <td><img src="http://www.armstrongteasdale.com/Marketing/TestBlue.gif" width="600" height="104" /></td>
  </tr>
  <tr>
    <td><img src="http://www.armstrongteasdale.com/Marketing/TestYellow.gif" width="600" height="99" /></td>
  </tr>
</table>
</body>
</html>

whatyouare, 3 years ago

I added the CSS border collapse to another version of the above without success.  Images still break apart, can supply a screenshot of what happens if it would help.

Redferret, 3 years ago

inline css is only stripped in Gmail and possibly much less significant clients, still it's good practive to move your CSS inline.

This seems like the display:block issue, are you sure you added it correctly?


Gmail app apologist
whatyouare, 3 years ago

I believe I'm using it correctly.  This was one of the first 'fixes' I tried, and have been using, but it's not actually working for me.  I've added it to my test file, the new code below. Images still break apart. Let me know if something looks off:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://www.armstrongteasdale.com/Marketing/TestRed.gif" width="600" height="97" style="display:block" /></td>
  </tr>
  <tr>
    <td><img src="http://www.armstrongteasdale.com/Marketing/TestBlue.gif" width="600" height="104" style="display:block" /></td>
  </tr>
  <tr>
    <td><img src="http://www.armstrongteasdale.com/Marketing/TestYellow.gif" width="600" height="99" style="display:block" /></td>
  </tr>
</table>
</body>
</html>

Redferret, 3 years ago

How exactly are you testing it? I've only checked in Gmail mobile and Outlook but it's fine for me


Gmail app apologist
whatyouare, 3 years ago

I send the file from outlook to my hotmail, gmail and yahoo email accounts. Outlook 2010 is what we use, and it shows up fine in Outlook.

To be specific on how I send it, my html file resides on our server.  I open a new email message, choose the Insert > Attach File > browse to file on server, choose file > arrow down on Insert button and choose 'Insert as Text'. 

Here's what it looks like gmail:

http://s11.postimg.org/tj9mp6tyr/test.jpg

Hotmail actually has even bigger gaps between the color block images.

Redferret, 3 years ago

Ah Ok! that's the issue, when you send from Outlook like that you're not getting the html as you wrote it, you're getting a version that Outlook creates with it's rendering engine. Gmail and Hotmail don't know how to interpret some of that code so thats why you're seeing gaps.

The only way to fix this is to use a proper mail server to send your test emails, you can get a free account with Campaign Monitor to test from and you'll probably find that it's faster aswell!


Gmail app apologist
whatyouare, 3 years ago

Ok - I'll give that a shot, thank you for the info.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098