在 Outlook 中为 TD 添加间距(HTML 电子邮件)

Question

我目前正在构建电子邮件通讯并在 Litmus 中进行测试。

时事通讯应如下所示(见下图(：

https://image.ibb.co/f4L7ma/Screen_Shot_2017_08_16_at_10_44_25.png

显然，它在Outlook中看起来并不完美，但是在风格上是否有任何方法可以在Outlook中的标签之间添加间距。

以下是新闻稿在 Outlook 2013 (Windows 7( 中的呈现方式：

https://image.ibb.co/itK06a/Screen_Shot_2017_08_16_at_10_44_11.png

请注意，我处于早期测试阶段，我暂时只关心间距。

我在下面附加了本节的代码：

<!-- Main Changes Content Row One Starts -->
<tr>
<!-- Row One left Box Starts -->
<td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
<font face="'Open Sans', Arial, sans-serif">
<!-- Change Text Here -->
<span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
<strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.
</span><br /><br />
</font>
</td>
<!-- Row One left Box Ends -->
<!-- Row One Right Box Starts -->
<td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
<font face="'Open Sans', Arial, sans-serif">
<!-- Change Text Here -->
<span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
<strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.
</span><br /><br />
</font>
</td>
<!-- Row One Right Box Ends -->
</tr> 
<!-- Main Changes Content Row One Ends -->

如果有人在Outlook中对此有很好的解决方法，那就太好了。

Answer 1

Outlook 确实避免使用填充和边距，因此这里是在一行中添加td以增加间距的好方法。此外，Outlook 只考虑系统字体而不是谷歌字体。并以像素而不是百分比为单位使用宽度。

<tr>
<!-- Row One left Box Starts -->
<td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
<font face="'Open Sans', Arial, sans-serif">
<!-- Change Text Here -->
<span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
<strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
<br /><br />
</font>
</td>
<!-- Row One left Box Ends -->
<td align="left" width="20" bgcolor="#f5f4f4" class="100p mobile-column"></td>
<!-- Row One Right Box Starts -->
<td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column">
<font face="'Open Sans', Arial, sans-serif">
<!-- Change Text Here -->
<span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;">
<strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span>
<br /><br />
</font>
</td>
<!-- Row One Right Box Ends -->
</tr>