不需要的白色 space 破坏了 outlook 的布局
Unwanted white space is breaking the layout on outlook
我创建了一个电子邮件模板，我将布局宽度保持在 600px。
有四列，每列 150px 宽度。
除 Outlook 外，它在所有客户端上都运行良好，Outlook 的布局因不需要的列间距而中断。
虽然我没有使用任何显式填充。
这是它在 Outlook 中的样子：
如有任何帮助，我们将不胜感激。
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;">
<!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;">
<!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top">
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End -->
</td>
</tr>
似乎有很多不必要的代码。我建议使用更简单的代码：
<div style="width: 600px; display: flex;">
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
不使用 flex 的另一种选择
<div style="width: 600px;">
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
编码 tables 作为列在 outlook 中变得有点繁琐。默认情况下，当两个 table 并排放置时，outlook 会在右侧添加 space。这里有两个选择：1。使用幽灵列（个人最喜欢的） 或 2。将 table 宽度（和图像宽度）减少几个像素并向 tables (style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;").
添加样式
选项 1：幽灵专栏
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
选项 2：样式 tables
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
希望这就是您想要的答案。
我创建了一个电子邮件模板，我将布局宽度保持在 600px。
有四列，每列 150px 宽度。
除 Outlook 外，它在所有客户端上都运行良好，Outlook 的布局因不需要的列间距而中断。
虽然我没有使用任何显式填充。
这是它在 Outlook 中的样子：
如有任何帮助，我们将不胜感激。
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;">
<!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;">
<!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top">
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End -->
</td>
</tr>
似乎有很多不必要的代码。我建议使用更简单的代码：
<div style="width: 600px; display: flex;">
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
不使用 flex 的另一种选择
<div style="width: 600px;">
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
<img style="border:0; width: 150px; height: 150px; float: left;" src="http://www.stevensegallery.com/200/200" alt=""/>
</div>
编码 tables 作为列在 outlook 中变得有点繁琐。默认情况下，当两个 table 并排放置时，outlook 会在右侧添加 space。这里有两个选择：1。使用幽灵列（个人最喜欢的） 或 2。将 table 宽度（和图像宽度）减少几个像素并向 tables (style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;").
选项 1：幽灵专栏
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
选项 2：样式 tables
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; padding: 0; vertical-align: top; padding-bottom:0;"><!-- stat -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e5e5e5">
<tr>
<td align="center" style="padding-top:20px; padding-bottom:20px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:block; max-width:600px;" class="wrapto680px">
<tr>
<td width="100%" valign="top" align="center" style="text-align:center; font-size:0px;"><!--[if (gte mso 9)|(IE)]><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" width="600"><![endif]-->
<div style="display:inline-block;" class="ecxmarginhack">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="100%" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table>
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td style="font-size:0px;"><img style="display:block;" border="0" src="http://www.stevensegallery.com/200/200" width="150" height="150" alt=""/></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- end 4 col --></td>
</tr>
</table>
<!-- End --></td>
</tr>
</tbody>
</table>
希望这就是您想要的答案。