logo标签列表

Gmail电子邮件表格间距

emailgmail
37

我知道这个问题已经被反复讨论了很多次.. 但是今天早上我遇到了一个令我十分困扰的 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像素的白色空间。电子邮件中还发生在另外几张图片上，但其余部分都能正常工作。无论我多少次比较这些表格，都行不通。
你有什么想法吗？
6个回答
72

我最近经常遇到这个问题。我们发现最好的解决方案（也就是在大多数邮件客户端中看起来最一致的）是以下代码：

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

只需为每个图像添加 display: block 属性，就可以解决问题。

1
这应该是正确的答案。display:block 对于跨电子邮件客户端、跨浏览器和移动本地体验要好得多，同时发现表格样式的border-collapse: collapse也很不错。 - TheBlackBenzKid
1
很棒的解决方案！我已经寻找了一段时间这个修复方法！ - laarsk
2
不再需要威尼斯百叶窗！谢谢！ - Fiasco Labs
小提醒一下：当你有自己的样式时，不要只是复制粘贴“style = display: block;”，显然这样做是行不通的。 :) - Gellie Ann
2
现在我的问题是，如何让Outlook将样式标签实际发送到Gmail，因为它在另一端看不到。 - Alan Macdonald
4

针对我的问题（如果有其他人也遇到了类似的问题），我终于找到了问题所在（或者说是解决方案）。

我在图像本身上添加了 style="float: left"，这神奇地解决了它。 另外，如果在所有图像上使用“display: block”，通常会产生类似的结果，但是当它在其他地方完美运行时，浮动似乎会清除GMail的间距问题。

很棒！正是我在寻找的。 - Moak
2

我遇到了同样的问题，我添加了下面这行代码

  style="line-height:1px;"

在上面的td标签中。
在我的html模板文件列表中。
2

Gmail可以在任何表格中添加空白，包括嵌套的表格。

虽然这是一种有点hack的方法，但是将以下内容作为内联样式添加到表格中可以去除空白：

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

使用display:block在图像上可以减少图像单元格之间的一些空间，但不能完全去除所有间隙。

在父表格上添加已弃用的cellpadding/cellspacing属性（<table border="0" cellpadding="0" cellspacing="0">），这些最后的间隙也消失了。

1
我遇到了同样的问题，尝试了上述所有样式选项，但都没有起作用。我将表格高度缩短，这样就去掉了所有间隔。
这怎么构成一个答案？这是一条评论。 - mccainz
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接