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

Nathan Pitman 发表于 Dev

内森·皮特曼

我正在编写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标签的页边距。：？

迈克尔·雅格

不要使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。