blocks|key|296112|text|HTML邮件的样式太可怕了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296113|以下是一些小贴士：|296114|border-spacing:0;+/*this+should+fix+the+spacing+problem*/|offset|length|style|CODE|296115|您需要将其应用于所有正在使用的表，因此应将其包含在顶部的<style>块中，如下所示：|296116|<head>
++<style>
++++table+{border-spacing:+0;}
++</style>
</head>|code-block|syntax|javascript|296117|(对于错误的格式，很抱歉，不知何故代码拒绝在多行中正确显示)|296118|entityMap^0|0|0|0|1L|0|S|7|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@$F|10|G|11|H|I]]|9|@]|A|$]]|$1|L|3|M|5|N|7|12|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Styling HTML mails is horrible.

A few tips:

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

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

<pre><code>&lt;head&gt;
 &lt;style&gt;
 table {border-spacing: 0;}
 &lt;/style&gt;
&lt;/head&gt;
</code></pre>

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

blocks|key|512732|text|我知道这可能不是你要找的，但是...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512733|松开间隔(spacer.gif)，为了松开响应电子邮件中的大空格，必须将图像嵌入到每行一个单元格中，然后才能显示所有的图像块。|512734|希望它能有所帮助，这是我在我的案例中使用的解决方案。|512735|每行一个单元格：|512736|<table+border="0"+cellpadding="0"+cellspacing="0">
++++<tr>
++++++++<td>
++++++++++++<img+src="image.jpg"+width="600"+height="300"+/>
++++++++</td>
++++</tr>
</table>|code-block|syntax|javascript|512737|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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:

<pre><code>&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;img src="image.jpg" width="600" height="300" /&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

blocks|key|512805|text|只需在<table>上添加style="line-height:50%25"即可。您将注意到，如果您的邮件程序中有文本，这将影响文本行高度。要解决这个问题，您必须在<td>中添加：style="line-height:100%25"和文本。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|512806|entityMap^0|3|7|D|N|28|4|2G|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

Just add <code>style="line-height:50%"</code> onto the <code>&lt;table&gt;</code>. 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: <code>style="line-height:100%"</code> to the <code>&lt;td&gt;</code> with text.

blocks|key|512911|text|所以我知道这可能看起来有点疯狂，但我有完全相同的问题，结果是我的代码中出现了brs。是的，我通过嵌套我的tds来格式化HTML的事实导致gmail添加了新的tds，里面有br标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512912|我花了一段时间才意识到，我们在将电子邮件的页眉和页脚代码转换为文本后，才将其添加到电子邮件中。|512913|如果您使用类似的方法，我建议您“缩小”您的HTML。|512914|而不是：|512915|<table>
++++<tr>
++++++++<td>
++++++++++++Content
++++++++</td>
++++</tr>
</table>|code-block|syntax|javascript|512916|尝试：|512917|<table><tr><td>Content</td></tr></table>|512918|尽管看起来很可怕。|512919|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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:

<pre><code>&lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;
 Content
 &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

Try:

<pre><code>&lt;table&gt;&lt;tr&gt;&lt;td&gt;Content&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>

As horrid as it may seem.

blocks|key|296217|text|display:block很好地解决了我的身体和页脚之间的差距问题，但它对我的页眉没有任何作用；其他修复也是如此。我知道这是一个老帖子，但如果有人偶然发现了它，上面的内容没有帮助，这就为我做了：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|296218|将style="line-height:1px;+font-size:0.0em;"添加到包含标题表的<td>标记中。|296219|您可能需要尝试几个不同的标签才能找到正确的标签，但这是另一个可以尝试的解决方案。|296220|entityMap^0|0|D|0|1|15|1F|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

<code>display:block</code> 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 <code>style="line-height:1px; font-size:0.0em;"</code> to the <code>&lt;td&gt;</code> 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.

blocks|key|512544|text|我注意到header和body的内容实际上是另一个单元格中的表。为什么不试着把标题和正文分开，然后把它们移到分开的行上呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512545|如下所示：|512546|<table+border="0"+cellpadding="0"+cellspacing="0">
++<tr>
++++<td>
+++++++
++++</td>
++</tr>

++<tr>
++++<td>
+++++++
++++</td>
++</tr>
</table>|code-block|syntax|javascript|512547|另外，只需要一个提示，不要使用<center>标签来居中。如果是在表格单元格中，只需使用align="center"即可。这也适用于整个表，因此为了使表居中，只需将align属性设置为center。|offset|length|style|CODE|512548|entityMap^0|0|0|0|F|8|18|E|2A|5|2K|6|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]|$K|Y|L|Z|M|N]|$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

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:

<pre><code>&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
 &lt;tr&gt;
 &lt;td&gt;
 &lt;!-- Header table --&gt;
 &lt;/td&gt;
 &lt;/tr&gt;

 &lt;tr&gt;
 &lt;td&gt;
 &lt;!-- Body table --&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

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

blocks|key|512863|text|除了将display:block添加到img之外，还要将cellpadding="0"+cellspacing="0"+border="0"添加到table+(重要:不要忘记将其应用于包装table+)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|512864|干杯|512865|entityMap^0|3|D|J|3|S|16|21|5|2M|5|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

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

Cheers

blocks|key|512644|text|只需添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|512645|table{+
font-size:0em;
border-collapse:+collapse;
}|code-block|syntax|javascript|512646|它会解决你的问题|512647|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

simply add

<pre><code>table{ 
font-size:0em;
border-collapse: collapse;
}
</code></pre>

it will solve your problem

My code is at

<a href="http://jsfiddle.net/user1212/G86KE/4/" rel="noreferrer">http://jsfiddle.net/user1212/G86KE/4/</a>

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

However , it does not seem to go away.

<img src="https://i.stack.imgur.com/omsJK.png" alt="enter image description here">

Is there a fix to this?

extra white space between tables in html email for gmail client

我的代码是问题是在gmail中，它在同一个单元格内的两个表之间留下了额外的空白。我已经试过display:block;  margin:0; padding:0; line-height:0;了然而，它似乎并没有消失。​​有什么办法可以解决这个问题吗？

问用于gmail客户端的html电子邮件中表格之间的额外空白
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于gmail客户端的html电子邮件中表格之间的额外空白EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于gmail客户端的html电子邮件中表格之间的额外空白
EN