Я испытываю разрыв между заголовком и телом только в Outlook 2013. Ниже приведено скриншоты для горячего просмотра в Outlook:
Вот как это должно выглядеть:
Мой заголовок HTML-код:
<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
</td>
<td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
<td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
<td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
<table cellspacing="0" cellpadding="0" width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;" border="0" height="51">
<tr>
<td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <a href="#" style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px "><span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></a></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
</tr>
</table>
<!-- end header -->
Это, вероятно, поможет:
http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells
В принципе, это проблема с пропиской с перспективой - и это связано с размером шрифта. Это довольно старая проблема от waaaay в тот же день, что и таблицы макетов веб-сайта, и старые трюки с установкой размера шрифта в 1px или с использованием отвратительных старых 1x1px прозрачных gif файлов :)
Используйте это в своей таблице стилей
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
И встроенная строка для каждой таблицы объявляет
table border="0" cellpadding="0" cellspacing="0"
Чтобы получить 1 пиксель белого пространства между каждой ячейкой, используйте вложенные таблицы. и объявить таблицу таким образом
table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
и вот как так и должно быть,<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;" />
. Дайте мне знать, если это что-то сделал.