HTML-адрес электронной почты - пробел между строками таблицы

Question

Я создаю набор почтовых открыток электронной почты и столкнулся с проблемами с некоторыми версиями Outlook и Gmail, создавая нежелательные пробелы между определенными (но не все) строками таблицы.

Я довольно новичок в кодировании электронной почты HTML и нуждаюсь в помощи по устранению неполадок - может ли кто-нибудь сказать мне, что нужно изменить в моем коде для решения этой проблемы?

Вот моя тестовая страница: http://www.kristi.net/holidaycards/card_test.html

А вот крышка экрана показывает проблему в Outlook: http://i43.tinypic.com/34ezrc3.gif

Эти клиенты затронуты:

Outlook 2007
Outlook 2010
Перспективы 2013
Gmail (Android)
Gmail (Explorer)
Gmail (Chrome)

Кроме того, чтобы вы знали, пользователи будут открывать HTML в своем браузере, а затем копировать содержимое в свой почтовый клиент (Outlook) перед настройкой текста и отправкой сообщения ,

Answer 1

Вам необходимо style="display:block;" на ваших изображениях. Попробуйте что-то вроде этого:

<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;"> 

Следует отметить, что эти пробелы неизбежны, если кто-то направляет вашу электронную почту из Outlook. По этой причине всегда лучше разбивать изображение по вертикали.

Это поможет вам начать:

<table width="600" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="50"> 
     <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    <td width="500" valign="top"> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td> 
      <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;"> 
      </td> 
     </tr> 
     <tr> 
      <td height="200" valign="top" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;"> 
      Content here... 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <img alt="" src="" width="500" height="50" style="margin: 0; border: 0; padding: 0; display: block;"> 
      </td> 
     </tr> 
     </table> 
    </td> 
    <td width="50"> 
     <img alt="" src="" width="50" height="300" style="margin: 0; border: 0; padding: 0; display: block;"> 
    </td> 
    </tr> 
</table> 

Answer 2

Попробуйте добавить vertical-align: middle; стиль к изображениям что-то вроде:

<img alt="" src="" width="500" height="50" style="verticla-align: middle;"> 

Для меня это было от чего прийти только добавить этот стиль.