gmail 客户端的 html 电子邮件中表格之间的额外空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11689800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
extra white space between tables in html email for gmail client
提问by user544079
My code is at
我的代码在
http://jsfiddle.net/user1212/G86KE/4/
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;
问题是在 gmail 中，它在同一单元格内的 2 个表之间留下了额外的空白。我试过了display:block; margin:0; padding:0; line-height:0;
However , it does not seem to go away.
然而，它似乎并没有消失。
Is there a fix to this?
有没有办法解决这个问题？
采纳答案by Anders Arpi
Styling HTML mails is horrible.
样式化 HTML 邮件很糟糕。
A few tips:
一些提示：
border-spacing:0; /*this should fix the spacing problem*/
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:
您需要将此应用于您正在使用的所有表，因此您应该将其包含在<style>顶部的块中，如下所示：
<head>
<style>
table {border-spacing: 0;}
</style>
</head>
(sorry for the bad formatting, somehow the code refused to show up properly on multiple lines)
（抱歉格式不正确，代码以某种方式拒绝在多行上正确显示）
回答by Hannah F Hudson
Using style="display:block" in the image tag should work. Also, don't forgetto add it to the spacer image if you're using that.
在图像标签中使用 style="display:block" 应该可以工作。另外，如果您正在使用它，请不要忘记将其添加到间隔图像中。
回答by sealview
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:
我知道这不是您可能要找的东西，但是...
松开垫片 (spacer.gif)，为了松开响应式电子邮件中的大空间，图像必须嵌入每行一个单元格中，而不是显示所有图像被阻止。
希望它有所帮助，这是我在我的案例中使用的解决方案。
每行一个单元格：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="image.jpg" width="600" height="300" />
</td>
</tr>
</table>
回答by Mandlaness
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.
只需添加style="line-height:50%"到<table>. 您会注意到，如果您的邮件中有文本，这将影响文本行高。要解决此问题，您必须添加：style="line-height:100%"到<td>with 文本。
回答by ariebear
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.
所以我知道这可能看起来有点疯狂，但我遇到了完全相同的问题，结果证明是我代码中的 brs。是的，我通过嵌套我的 tds 来格式化我的 HTML 的事实导致 gmail 添加了带有 br 标签的新 tds。
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.
如果您使用类似的方法，我建议“缩小”您的 HTML。
Instead of:
代替：
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
Try:
尝试：
<table><tr><td>Content</td></tr></table>
As horrid as it may seem.
尽管看起来很可怕。
回答by jrod
display:blockworked 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:
display:block对于我的正文和页脚之间的间隙问题非常有效，但它对我的页眉没有任何作用；其他修复也没有。我知道这是一个旧线程，但如果有人偶然发现它并且上述内容没有帮助，这对我来说是这样的：
Add style="line-height:1px; font-size:0.0em;"to the <td>tag which contains your header table.
添加style="line-height:1px; font-size:0.0em;"到<td>包含标题表的标签。
You might have to try a couple of different tags to find the right one, but it's another solution to try.
您可能需要尝试几个不同的标签才能找到正确的标签，但这是另一种尝试的解决方案。
回答by cristianbote
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 alignproperty to center.
另外，只是一个提示，不要使用<center>标签来居中。如果您在表格单元格内，只需使用align="center". 这也适用于整个表格，因此为了使表格居中，只需将align属性设置为center。
回答by vaskort
Besides adding display:blockto your imgalso add cellpadding="0" cellspacing="0" border="0"to your table(important: do not forget applying this to your wrapping tableas well)
除了添加display:block到您的img还添加cellpadding="0" cellspacing="0" border="0"到您的table（重要：不要忘记将其应用到您的包装table中）
Cheers
干杯
回答by vinay kumar
simply add
只需添加
table{
font-size:0em;
border-collapse: collapse;
}
it will solve your problem
它会解决你的问题
