如何刪除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電子郵件中圖片上方的空白區域？

回答

相關問題