HTML電子郵件中圖像之間的空白

我正在研究HTML電子郵件模板。出於某種原因，Outlook中的圖像左側存在空白區域，並在gmail中顯示圖像。HTML電子郵件中圖像之間的空白

我已經嘗試了很多這裏列出的建議，以否爲準。

下面是一些代碼，我指得：

<tr> 
    <td colspan="12"> 
     <img src="http://www.antequera-inland.com/email-template/images/_01.gif" width="600" height="172" alt=""/></td> 
</tr> 
<tr> 
    <td colspan="4" rowspan="4"> 
     <img src="http://www.antequera-inland.com/email-template/images/_02.gif" width="348" height="120" alt=""/></td> 
    <td colspan="7"> 
     <a href="http://www.skype.com" title="Chat or call us via Skype" target="_blank" 
      onmouseover="window.status='Chat or call us via Skype'; return true;" 
      onmouseout="window.status=''; return true;"> 
      <img src="http://www.antequera-inland.com/email-template/images/skype-link.gif" alt="Chat or call us via Skype" name="Chat-or-call-us-via-Skype" width="233" height="26" border="0" /></a></td> 
    <td rowspan="12"> 
     <img src="http://www.antequera-inland.com/email-template/images/_04.gif" width="19" height="591" alt=""/></td> 
</tr> 
<tr> 
    <td colspan="7"> 
     <a href="mailto:[email protected]" title="Send us as email" target="_blank" 
      onmouseover="window.status='Send us as email'; return true;" 
      onmouseout="window.status=''; return true;"> 
      <img src="http://www.antequera-inland.com/email-template/images/Email-Steve.gif" alt="Send us as email" name="Send-us-as-email" width="233" height="22" border="0" /></a></td> 
</tr> 
<tr> 
    <td colspan="7"> 
     <a href="http://www.antequera-inland.com" title="Visit Antequera Inland website" target="_blank" 
      onmouseover="window.status='Visit Antequera Inland website'; return true;" 
      onmouseout="window.status=''; return true;"> 
      <img src="http://www.antequera-inland.com/email-template/images/www.antequera-inland.com.gif" alt="Visit Antequera Inland website" name="Visit-Antequera-Inland-website" width="233" height="23" border="0" /></a></td> 
</tr>

任何幫助是非常讚賞。

問候。

來源

2012-06-06 Fernando Filipe

你有什麼試過的？那是否包括將圖像上的填充和邊距設置爲零？ –

我應該提及的另一件事是，有CSS stlye代碼以及我看到的是一件事建議刪除？ –

只是想我還會補充說，代碼在Firefox，IE和Chrome中正常顯示爲正常的HTML頁面。 –

嘗試從標籤周圍刪除所有空白的，所以你得到的東西，如：

<tr> 
    <td colspan="7"><a href="http://www.antequera-inland.com" title="Visit Antequera Inland website" target="_blank" onmouseover="window.status='Visit Antequera Inland website'; return true;" onmouseout="window.status=''; return true;"><img src="http://www.antequera-inland.com/email-template/images/www.antequera-inland.com.gif" alt="Visit Antequera Inland website" name="Visit-Antequera-Inland-website" width="233" height="23" border="0" /></a></td> 
</tr>

還添加樣式=「顯示：塊」每個圖像。

來源

2012-06-06 19:36:44 superboringusername

是的，我曾嘗試填充和邊距。我已經添加了它。沒有做任何事情，所以我再次刪除它們。我現在嘗試的答案建議... –

刪除空格無法工作不幸... –

我也添加了stlye = ..到每個img標籤，但仍然沒有去。 :( –

嘗試使用display：block;作爲所有圖像的內聯樣式。

來源

2013-06-19 12:33:11

更多關於這種技術在這裏：https://litmus.com/blog/remove-gaps-spaces-images-gmail-hotmail-yahoo – Lane

-1

<img src="" width="600" height="200" style="display:block !important; line-height:0 !important; font-size:0 !important;" />

我發誓這將消除圖像周圍的所有空間。將在所有電子郵件客戶端上像一個魅力工作。

來源

2013-10-18 06:25:36

嘗試這些：

在標籤內： IMG {顯示：塊;}

在標記：

和尖端：如果你有可編輯的文本，嘗試使用線 - 高，並放置一個小於字體大小的數字。線條高度可能會與表格混淆，並創建該白線。

來源

2014-10-10 19:50:26 paulocholla

有時僅向img標籤添加「display：block」並不總是有效。嘗試去除填充並在img的容器周圍設置低線高度。如：

<td style="background-color: #a3a5a8; padding: 0; line-height: 10px;"> 
<img src="http://www.example.com/images/header.png" style="width: 600px; height: 274px; display: block;" alt="header logo"> 
</td>

來源

2017-05-02 15:42:16 javaBean007

HTML電子郵件中圖像之間的空白

回答

相關問題