HTML电子邮件中图像之间的垂直间距
Posted
技术标签:
【中文标题】HTML电子邮件中图像之间的垂直间距【英文标题】：Vertical Spacing Between Images In HTML Email 【发布时间】：2016-07-12 17:03:17 【问题描述】：我正在开发 html 电子邮件模板。 我用几个嵌套表创建了它。 我发现 Outlook 中的图像右侧有空格。 所以我试图解决这个问题，但它没有解决。 最后，我根据我创建的彩色图像创建了一个简单的模板，以便识别表格单元格。
这是我的代码（请复制并在 Outlook 上测试）：
<!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>HTML Email Design Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="all" type="text/css">
table td
border-collapse: collapse;
img padding: 0; margin: 0; display:block;
</style>
</head>
<body style="margin: 0; padding: 0;" bgcolor="#cccccc">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border: 1px solid #000000;">
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
First Row
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
<tr>
<td >
<img src="http://2a-web.com/email/test/images/img-01.jpg" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td >
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
<img src="http://2a-web.com/email/test/images/img-02.jpg" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td >
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
<img src="http://2a-web.com/email/test/images/img-03.jpg" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td bgcolor="#ffc33c">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
<img src="http://2a-web.com/email/test/images/img-04.jpg" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td bgcolor="#16b512">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
<img src="http://2a-web.com/email/test/images/img-05.jpg" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td >
<img src="http://2a-web.com/email/test/images/img-06.jpg" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
Third Row
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>那么，如何消除单元格之间的间隙？
感谢您的帮助。
【问题讨论】：
table border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
【参考方案1】：
在使用您提供的 HTML 查看并在 Outlook 中进行测试后，我相信我知道您正在经历什么，并且它必须与图像有关。
首先，您的 HTML 中的所有图像都不可用，因此我不得不使用自己的图像进行测试。这就是我注意到问题的地方。我的图像导致电子邮件扩展超出指定的 600 宽度。这是因为对于 Outlook，如果您要为元素使用宽度和高度属性，则假定您省略了 px 部分 . IE。 150 不 150px。一旦我做完所有的事情，就没有间距问题了。
在我强制其中一张底部图像具有夸张的宽度后，我只能重现图像右侧的垂直间距/间隙，即当前设置为 150（与包含 td 相同），所以我将其设置为 155。然后砰！得到间距。
意味着您的表格布局/css 在大多数情况下都很好，Outlook 可能会因为您添加 px 部分而吓坏了。要么删除它，要么用内联样式设置宽度/高度。
【讨论】：
以上是关于HTML电子邮件中图像之间的垂直间距的主要内容，如果未能解决你的问题，请参考以下文章