如何删除HTML电子邮件中图片上方的空白区域？

我已经搜索了网站和这个景象，并尝试了所有可能的解决方案，仍然无法弄清楚为什么Outlook 2007-2013在我的图片上创建了一个白色条。如何删除HTML电子邮件中图片上方的空白区域？

这里是一个完整的电子邮件中的链接：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>

来源

2013-04-09 Kosha Burnett

我相信你需要添加显示：块到每个图像。

旧代码： <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;" />

来源

2013-04-09 16:34:59 cclark413

您可能还需要在您的表格中添加style =“border-collapse：collapse” – cclark413 2013-04-09 16:36:41

非常棒！我认为这是增加了帮助的边界崩溃。谢谢！ – 2013-04-09 17:18:59

非常欢迎:) – cclark413 2013-04-09 17:20:17

<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电子邮件帐户中的空白区域。希望这有助于！

来源

2014-10-07 17:08:20 Jason

如何删除HTML电子邮件中图片上方的空白区域？

回答

相关问题