如何删除 HTML 电子邮件中图像上方的空白？答案

【问题标题】：How do I remove the white space above my images in an HTML email?如何删除 HTML 电子邮件中图像上方的空白？
【发布时间】：2013-04-01 03:26:23
【问题描述】：

我已经搜索了网络和这个景象并尝试了所有可能的解决方案，但仍然无法弄清楚为什么 Outlook 2007-2013 会在我的图像上方创建一个白色条带。

这是完整电子邮件的链接：http://www3.districtadministration.com/mailing/Templates/da-webinar-archives.html

这是我的代码：

<table id="webinars" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #e6e6e6;">
    <tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #1]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #1]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>

    <tr style="border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #2]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #2]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>

    <tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #3]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #3]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>

    <tr style="border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #4]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #4]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>
</table>

【问题讨论】：

标签： css image html-table html-email removing-whitespace

【解决方案1】：

我相信您需要为每个图像添加 display:block。

旧代码： <img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" />

新代码： <img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" style="display:block;" />

【讨论】：

您可能还需要将 style="border-collapse:collapse" 添加到您的表格中
太棒了！我认为这是增加了帮助的边界崩溃。谢谢！
谢谢约翰！我仍然在这里学习我的方式。甚至没有意识到有这样的事情哈哈

【解决方案2】：

<img alt="Image Description Goes Here" border="0" src="http://www.your-image-url-goes-here.jpg" 
width="600" height="176" style="padding:0px; display: block; line-height: 0px; font-size: 0px; border:0px;" 
align="top">

您需要在其中包含... align="top" ... 代码。这会强制图像在顶部对齐。通过将所有其他代码维度设置为0px，它将空格指定为0px。此外，display:block 在删除空白方面也非常重要，因此浏览器知道如何显示图片的布局和格式。

我测试了这段代码，它删除了 Gmail、AOL、Yahoo、Hotmail 和我的远程 Outlook 电子邮件帐户中的空白。希望这会有所帮助！

【讨论】：