Gmail 电子邮件表间距答案

【问题标题】：Gmail Email Table SpacingGmail 电子邮件表间距
【发布时间】：2010-08-05 15:39:33
【问题描述】：

我知道这匹马差点被打死..但今天早上我遇到了一个 Gmail 表格间距问题。

<td valign="top">
        <img src="###/enewsletter_layout_v3_18.jpg" alt="" />
        <table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;">
            <tr>
                <td valign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;">
                New Patient Special Offer <br/>
                Save $$$
                </td>                   
            </tr>
            <tr>
                <td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;">
                    <h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1>
                    If you have read anything in this newsletter and have any questions or would like to 
                    discuss further, please contact <br/>
                    The Centre at (555) 555-5555 
                </td>                   
            </tr>           
        </table>

    </td>

无论我做什么，那里的表格中的第一张图片（layout_v3_18）总是在它下面有间距。 Gmail 中大约有 2-3 像素的空白区域。发生在电子邮件中的其他几个图像上，但其余的工作正常。无论我比较表格多少次，它都不起作用。

想法？

【问题讨论】：

标签： email gmail

【解决方案1】：

实际上我最近经常遇到这个问题。我们发现效果最好的代码（阅读：在大多数邮件客户端中看起来一致）如下：

<img src="###" style="display: block;" />

只需将 display: 块添加到每个图像即可解决问题。

【讨论】：

这应该是答案。 display:block 对于跨邮件客户端、跨浏览器和移动原生体验要好得多，还发现border-collapse:collapse 表格样式也很好。
很好的解决方案！我一直在寻找这个修复方法！
没有百叶窗了！谢谢！
小提醒：不要只是复制粘贴 style="display: block;" 特别是当您拥有自己的 style 时，因为，显然，这行不通。 :)
现在我的问题变成了，我如何让 Outlook 将样式标签实际发送到 gmal，因为它没有出现在另一端

【解决方案2】：

在回答我自己的问题时（以防其他人有类似的问题），我终于找到了问题（或解决方案）。

我在图像本身上添加了style="float: left"，它神奇地修复了它。或者，如果在所有图像上使用“显示：块”往往会产生类似的结果，但是当它在其他地方工作得很好时，浮动似乎专门为 GMail 清除间距。

【讨论】：

太棒了！正是我想要的

【解决方案3】：

Gmail 可以在任何表格周围添加空格，包括嵌套表格。

虽然将以下内容作为内联样式添加到表格中会删除空格：

style="font-size:0.0em;" ...

【讨论】：

【解决方案4】：

遇到同样的问题，我在下面添加了

  style="line-height:1px;"

在上面的 td 标签中。

在我的文件列表中的 html 模板中。

【讨论】：

【解决方案5】：

在图像上使用display:block 会减少图像单元格之间的一些空间，但并未消除所有间隙。

在父表 (<table border="0" cellpadding="0" cellspacing="0">) 上添加已弃用的 cellpadding/cellspacing 属性，这些最后的空白也消失了。

【讨论】：

【解决方案6】：

我遇到了同样的问题，并且做了上述所有样式选项，但没有任何效果。我把桌子的高度缩短了，它去掉了所有的间距。

【讨论】：

这如何构成答案？这是一条评论。