html - 使用 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>