使用vspace / hspace在HTML电子邮件中填充图像时的双倍边距

Question

我正在编写HTML电子邮件（唉！），因为Outlook不尊重图片上的填充/边距/边框，而是使用vspace和hspace。有问题的图像可以选择从模板中删除，所以我需要包装它的文本也保持它自己的边距。为了达到这个目的，我没有'在框中应用填充，而是在图像后面的H2和P标签边缘。

然而，在Outlook 2007和2010中，我最终得到了图片左侧的双边距，Outlook 2013中的一切都还可以。

这是我在Outlook 2010中的内联代码：

<td class="box" width="50%" style="border-collapse:collapse;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#F8F8F8;vertical-align:top;" >
<img src="http://placehold.it/110x110" width="110" align="left" hspace="10" vspace="10" style="outline-style:none;text-decoration:none;-ms-interpolation-mode:bicubic;" />
<h2 style="color:#254485 !important;margin-top:10px;margin-bottom:0;margin-right:10px;margin-left:10px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-size:18px;line-height:normal;" >Dolor Bibendum Mollis</h2>
<p style="line-height:normal;margin-top:10px;margin-bottom:10px;margin-right:10px;margin-left:10px;" >
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</td>

这就是我在Outlook 2007和2010中获得的结果：

请注意图像左侧的双边距，它似乎应用了hspace，但随后也继承了应用于H2和P标记的边距。 ：

Answer 1

不使用vspace和hspace，而是将图像包装在表格中并对表格应用填充：

<table><tr><td class="box" width="50%" style="border-collapse:collapse;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;background-color:#F8F8F8;vertical-align:top;" >
<table cellspacing="0" cellpadding="0" border="0" align="left"><tr><td valign="top" style="padding:0 10px 10px 0"><img src="http://placehold.it/110x110" width="110" align="left" style="outline-style:none;text-decoration:none;-ms-interpolation-mode:bicubic;" /></td></tr></table>
<h2 style="color:#254485 !important;margin-top:0;margin-bottom:0;margin-right:10px;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-size:18px;line-height:normal;border-left:10px solid #f8f8f8" >Dolor Bibendum Mollis</h2>
<p style="line-height:normal;margin-top:10px;margin-bottom:0;margin-right:10px;margin-left:0;" >
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></td></tr></table>