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

问题描述

我正在开发一封电子邮件，根据设计，横幅广告的图像似乎重叠在标题中。通过获取横幅图像的前35px左右并使其成为自己的图像（该图像位于横幅图像其余部分的上方）来实现效果。

这是一个样机，概述了我的意思；图像的顶部具有白色背景，而图像的其余部分具有浅蓝色背景。效果是图像似乎重叠成白色。

mockup of email design

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

gap between images

我尝试了以下方法，但没有运气：

cellpadding和cellspacing = 0
将表折叠包括到我的CSS中
在顶部图像上添加了空白边距（仅在某些电子邮件客户端上有效）
尝试将valign =“ bottom”定位到顶部图像，使其位于表格底部

这是电子邮件代码的一部分，可在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',style='max-width:100%;height:auto' %}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
  <!-- END REMAINDER OF BANNER IMAGE -->

除了上面介绍的方法之外，还有什么其他方法可以使这些图像在整个板上对齐？

解决方法

通过在图像中添加样式=“ display：block”来解决此问题。

html html-email hubspot