使用 vspace/hspace 填充 HTML 电子邮件中的图像时的双边距
Double margin when padding images in HTML email with vspace/hspace
我正在编写一封 HTML 电子邮件（呃！），因为 Outlook 不尊重 padding/margins/borders 图像，所以我改用 vspace 和 hspace。有问题的图像可以选择从模板中删除，所以我需要包装它的文本来保持它自己的边距。为了实现这一点，我 'not' 对框应用了填充，而不是对图像后面的 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 中并将填充应用到 table:
<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>
我正在编写一封 HTML 电子邮件（呃！），因为 Outlook 不尊重 padding/margins/borders 图像，所以我改用 vspace 和 hspace。有问题的图像可以选择从模板中删除，所以我需要包装它的文本来保持它自己的边距。为了实现这一点，我 'not' 对框应用了填充，而不是对图像后面的 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 中并将填充应用到 table:
<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>