Question

我一直在尝试创建一个HTML电子邮件。在gmail上查看时，它会显示图像之间的空格。我已经尝试了所有可能在互联网上找到的但是没有用的东西。任何帮助，将不胜感激。以下是相同的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#</title>

<style>
    table {border-collapse:collapse;}
</style>

</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" align="center" border="0">
  <tr bgcolor="#FFFFFF"><td align="center"> <font size="1" face="Arial" color="#666666">If you are unable to see this message <a href="#" target="_blank">Click Here </a></font></td></tr>
 </table>
<table cellpadding="0" cellspacing="0" style="margin:0; padding:0; border:none;" align="center" width="600" border="0">
  <tr><td><img src="images/bg-1.jpg" alt="Call: 9212612255" border="0" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
   <tr><td><img src="images/bg-2.jpg" alt="We support all Microsoft windows desktop operating system all software and hardware, Networking peripherals and internet are also supported" border="0" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
   <tr><td><img src="images/bg-3.jpg" border="0" alt="Computer Support By Microsoft Certified Engineers" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
    <tr><td><img src="images/bg-4.jpg" border="0" alt="Support available for any desktop or laptop Branded or Non-Branded" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
   <tr><td><a href="http://www.codeslab.com" target="_blank" style="border:none; text-decoration:none"><img src="images/bg-5.jpg" border="0" alt="Visit Our Website" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></a></td></tr>
     <tr><td><img src="images/bg-6.jpg" border="0" alt="For more details mail us at info@codeslab.com" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
   <tr><td><img src="images/bg-7.jpg" border="0" alt="Computer Support By Microsoft Certified Engineers" style="display:block; margin:0; padding:0; border:none; vertical-align:top;"/></td></tr>
</table>
<table cellpadding="0" cellspacing="0" align="center" width="600" border="0" style="margin:0; padding:0; border:none;">
    <tr>
       <td align="center">
           <font size="1" face="Arial" color="#666666">To unsubscribe mailing list, click <a href="http://codeslab.com/contact-us.php" target="_blank">here</a></font>
       </td>
    </tr>
</table>
</body>
</html>

Answer 1

使用CSS <img>设置所有display: block代码以解决此Gmail显示问题是一种常见的eDM技术。另外，请删除vertical-align CSS。

Answer 2

以下是HTML电子邮件支持的良好指南：

http://www.campaignmonitor.com/css/

如果要将img元素设置为display: block;，则vertical-align属性不起作用。因此，请尝试仅从图片中删除display: block。

另外，请记住，一旦您对此进行了更改，以便它在Gmail中有效，它可能会在Outlook或Yahoo!中破坏或Hotmail等。所以，彻底测试。

在以html格式化的gmail上查看时图像之间的空间

2 个答案: