Двойной край при добавлении изображений в HTML-адрес электронной почты с помощью vspace/hspace

Question

Я кодирую HTML-адрес электронной почты (ugh!) И потому, что 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>