我正在研究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" width="100%">
<tr>
<td>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="600" 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 width="600" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
<tr>
<td width="300" height="600">
<img src="http://2a-web.com/email/test/images/img-01.jpg" width="300px" height="600px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="300" height="600">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="300">
<img src="http://2a-web.com/email/test/images/img-02.jpg" width="300px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="300" height="300">
<table width="300" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="300">
<img src="http://2a-web.com/email/test/images/img-03.jpg" width="150px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="150" height="300" bgcolor="#ffc33c">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="150">
<img src="http://2a-web.com/email/test/images/img-04.jpg" width="150px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="150" height="150" bgcolor="#16b512">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-05.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-06.jpg" width="75px" height="150px" 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>
那么，我怎样才能消除细胞之间的差距？
我很感激你的帮助。
答案 0 :(得分：0)
在使用您提供的HTML查看Outlook后，我相信我知道您正在体验的内容，并且必须使用图片。
首先，HTML中的所有图片都不可用，因此我必须使用自己的图片进行测试。这是我注意到这个问题的地方。我的图片导致电子邮件扩展超出指定的宽度600. 这是因为如果你要使用元素的宽度和高度属性，你可以省略px部分，假设 。 I.E. 150 NOT 150px。一旦我完成了所有操作，就没有间距问题。
在我强制其中一个底部图像有一个夸张的宽度后，我只能重现图像右侧的垂直间距/间隙，即它当前设置为150（与包含td相同），所以我把它设置为155.并且bam！得到了间距。
这意味着你的表格布局/ css在大多数情况下都很好，因为你正在添加px部分，所以outlook可能很吓人。要么删除它，要么使用内联样式设置宽度/高度。