显示图像切片之间间隙的 HTML 电子邮件答案

【问题标题】：HTML Email Showing Gap Between Image Slices显示图像切片之间间隙的 HTML 电子邮件
【发布时间】：2017-02-23 04:17:21
【问题描述】：

在 Gmail 应用程序中查看时，我的 HTML 电子邮件在图像之间显示出轻微的 1 像素间隙。

我怎样才能消除这个差距，让我的图像切片看起来像一个流畅的图像？

我已经尝试 display: block on images, padding: 0 和 margin: 0 但我仍然得到那个差距。

这是我的 HTML：

<table border="0" cellpadding="0" cellspacing="0" style="width: 650px !important; padding: 0 !important;">
    <tr style="padding: 0 !important;">
        <td style="padding: 0 !important; line-height: 0;" align="left" valign="top">
            <a href="http://www.google.com/" target="_parent" style="display: block !important;"><img style="display: block !important; padding: 0 !important; margin: 0 !important;" border="0" src="01.jpg"></a>
        </td>
    </tr>
    <tr>
        <td style="padding: 0 !important; line-height: 0;" align="left" valign="top">
            <a href="http://www.google.com/" target="_parent" style="display: block !important;"><img style="display: block !important; padding: 0 !important; margin: 0 !important;" border="0" src="02.jpg"></a>
        </td>
    </tr>
    <tr>
        <td style="padding: 0 !important; line-height: 0;" align="left" valign="top">
            <a href="http://www.google.com/" target="_parent" style="display: block !important;"><img style="display: block !important; padding: 0 !important; margin: 0 !important;" border="0" src="03.jpg"></a>
        </td>
    </tr>
</table>

【问题讨论】：

我实际上认为这取决于应用程序在什么操作系统上的版本，在 Nougat 中它很有效，在 Marshmallow 中我得到了低于价格的线，但我还没有看到你看到的内容。您可以尝试在图片上设置border-collapse: collapse。
可能也值得暂时删除锚标签，看看您是否可以确定这是否可能导致问题

标签： html css email

【解决方案1】：

你只需要调整 A 标签的边距。

<table border="0" cellpadding="0" cellspacing="0" style="width: 650px !important; padding: 0 !important;">
    <tr style="padding: 0 !important;">
        <td style="padding: 0 !important; line-height: 0;" align="left" valign="top">
            <a href="http://www.google.com/" target="_parent" style="display: block !important;"><img style="display: block !important; padding: 0 !important; margin: 0 !important;" border="0" src="https://d1ok0qgebci2d3.cloudfront.net/91/650x366/TheatricalsCos_EM_10112016_01.jpg"></a>
        </td>
    </tr>
    <tr>
        <td style="padding: 0 !important; line-height: 0;" align="left" valign="top">
            <a href="http://www.google.com/" target="_parent" style="display: block !important;margin-top:-4px"><img style="display: block !important; padding: 0 !important; margin: 0 !important;" border="0" src="https://d1ok0qgebci2d3.cloudfront.net/91/650x98/TheatricalsCos_EM_10112016_02.jpg"></a>
        </td>
    </tr>
    <tr>
        <td style="padding: 0 !important; line-height: 0;" align="left" valign="top">
            <a href="http://www.google.com/" target="_parent" style="display: block !important;margin-top:-4px"><img style="display: block !important; padding: 0 !important; margin: 0 !important;" border="0" src="https://d1ok0qgebci2d3.cloudfront.net/91/650x148/TheatricalsCos_EM_10112016_03.jpg"></a>
        </td>
    </tr>
</table>

【讨论】：