extra white space between tables in html email for gmail client

问题

My code is at

http://jsfiddle.net/user1212/G86KE/4/

The problem is in gmail it leaves an extra white space between 2 tables inside the same cell. I have tried display:block; margin:0; padding:0; line-height:0;

However , it does not seem to go away.

Is there a fix to this?

回答1:

Styling HTML mails is horrible.

A few tips:

border-spacing:0; /*this should fix the spacing problem*/

You need to apply this to all the tables you are using, so you should include it in a <style> block at the top like so:

<head>
  <style>
    table {border-spacing: 0;}
  </style>
</head>

(sorry for the bad formatting, somehow the code refused to show up properly on multiple lines)

回答2:

Using style="display:block" in the image tag should work. Also, don't forget to add it to the spacer image if you're using that.

回答3:

I know this is not what you might be looking for but,...
Loose the spacer (spacer.gif), in order to loose the big spaces in a responsive email images has to be embedded in one cell per row, than will display all images block-ed.
Hope it helps, this was the solution I used in my case.
One cell per row:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="image.jpg" width="600" height="300" />
        </td>
    </tr>
</table>

回答4:

Just add style="line-height:50%" onto the <table>. You will notice that this will affect the text line heights if you have text in your mailer. To fix this you will then have to add: style="line-height:100%" to the <td> with text.

回答5:

display:block worked great for the gap problem between my body and footer, but it didn't do anything for my header; neither did the other fixes. I know this is an old thread, but in case anyone stumbles across it and the above didn't help, this did it for me:

Add style="line-height:1px; font-size:0.0em;" to the <td> tag which contains your header table.

You might have to try a couple of different tags to find the right one, but it's another solution to try.

回答6:

So I know this may seem a little wild, but I had the exact same issue and it turned out to be the brs in my code. Yes, the fact that I formatted my HTML by nesting my tds resulted in gmail adding new tds with br tags inside.

It took me time to realize that we were converting the email header and footer code to text before appending it to our emails.

If you're using a similar approach I would suggest "minifying" your HTML.

Instead of:

<table>
    <tr>
        <td>
            Content
        </td>
    </tr>
</table>

Try:

<table><tr><td>Content</td></tr></table>

As horrid as it may seem.

回答7:

Well, I noticed the header's and body's content are actually tables inside another cell. Why don't you try to separate the header and body and move them on their separated row?

Something like this:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
       <!-- Header table -->
    </td>
  </tr>

  <tr>
    <td>
       <!-- Body table -->
    </td>
  </tr>
</table>

Also, just a tip, don't use <center> tag to center stuff. If you're inside a table cell, just use align="center". This, also, applies to the whole table, so in order to center a table, just set the align property to center.

回答8:

Besides adding display:block to your img also add cellpadding="0" cellspacing="0" border="0" to your table (important: do not forget applying this to your wrapping table as well)

Cheers

回答9:

simply add

table{ 
font-size:0em;
border-collapse: collapse;
}

it will solve your problem

来源：https://stackoverflow.com/questions/11689800/extra-white-space-between-tables-in-html-email-for-gmail-client

标签

html

css

html-email