如何消除某些电子邮件客户端上图像之间的差距（当 cellspacing/padding 已经等于 0 时）

Question

我正在开发一个电子邮件，根据设计，横幅图像似乎与 header 重叠。该效果是通过获取横幅图像的顶部 35 像素左右并使其成为自己的图像来实现的，该图像位于横幅图像其余部分上方的行中。

这是一个模型，其中概述了我的意思；图像的顶部为白色背景，而图像的其余部分为浅蓝色背景。效果是图像似乎重叠到白色中。

mockup of email design

但是，在某些电子邮件客户端上（运行通过 Hubspot 测试器）图像之间存在间隙：

gap between images

我尝试了以下方法，但没有成功：

cellpadding 和 cellspacing = 0 到 tables
包含 table-collapse 到我的 CSS
已将 margin-bottom 添加到顶部图像（仅适用于某些电子邮件客户端）
尝试将 valign="bottom" 设置为顶部图像，使其位于 table

这是电子邮件代码的一部分，它在 Hubspot 预览中有效，但不适用于特定的电子邮件客户端：

     <!-- TOP PORTION OF BANNER IMAGE -->
    <table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
                    <tr>
                        <td width="100%">
                            <table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr align="center">
                                    <td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
                                        {% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- END TOP PORTION OF BANNER IMAGE -->
    <!-- REMAINDER OF BANNER IMAGE -->
    <table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
                    <tr>
                        <td width="100%">
                            <table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr align="center">
                                    <td valign="top" style="padding:0" width="100%">
                                        {% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  <!-- END REMAINDER OF BANNER IMAGE -->

除了我上面提到的方法之外，是否有特定的方法可以让这些图像全面对齐？

Answer 1

通过向图像添加 style="display:block" 解决了该问题。

如何消除某些电子邮件客户端上图像之间的差距（当 cellspacing/padding 已经等于 0 时）

How to remove gap between images on certain email clients (when cellspacing/padding already equals 0)

html

css

email

html-email

hubspot