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

Question

在 Gmail 应用程序中查看时，我的 HTML 电子邮件在图像之间显示出一个微小的像素差距。

我怎样才能消除这个间隙，使我的图像切片看起来像一个流畅的图像？

我已经尝试过在图像上显示: block 、填充:0 和边距: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>

Answer 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>