HTML电子邮件中图像之间的垂直间距答案

【问题标题】：Vertical Spacing Between Images In HTML EmailHTML电子邮件中图像之间的垂直间距
【发布时间】：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" 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>

那么，如何消除单元格之间的间隙？

感谢您的帮助。

【问题讨论】：

table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

标签： html css outlook html-table html-email

【解决方案1】：

在使用您提供的 HTML 查看并在 Outlook 中进行测试后，我相信我知道您正在经历什么，并且它必须与图像有关。

首先，您的 HTML 中的所有图像都不可用，因此我不得不使用自己的图像进行测试。这就是我注意到问题的地方。我的图像导致电子邮件扩展超出指定的 600 宽度。这是因为对于 Outlook，如果您要为元素使用宽度和高度属性，则假定您省略了 px 部分 . IE。 150 不 150px。一旦我做完所有的事情，就没有间距问题了。

在我强制其中一张底部图像具有夸张的宽度后，我只能重现图像右侧的垂直间距/间隙，即当前设置为 150（与包含 td 相同），所以我将其设置为 155。然后砰！得到间距。

意味着您的表格布局/css 在大多数情况下都很好，Outlook 可能会因为您添加 px 部分而吓坏了。要么删除它，要么用内联样式设置宽度/高度。

【讨论】：