Пустого пространства между изображениями в новостях в приложении Gmail на Android-устройстве

Question

я создаю шаблон электронной почты, имеющий следующий HTML:

<tr> 
    <td valign='top' align='center' style='font-size:0;white-space: nowrap;'> 
     <img src='' align='top' border='0' style='display:block;width:620px;border:0px;white-space: nowrap;'/> 
    </td> 
</tr> 
<tr> 
    <td align='center' style='font-size:0;white-space: nowrap;'> 
     <a href='#' style='font-size:0;display:block; border:0px;line-height:0;white-space: nowrap;' target='_blank'> 
      <img align='top' border='0' src='#' style='display:block;border:0pxwidth:620px;white-space: nowrap;'/> 
     </a> 
    </td> 
</tr> 
</tr> 

Я получаю белое пространство только на приложении Gmail на Android. Любая идея, где мне ничего не хватает?

Answer 1

В дополнение к zero'ing из размера шрифта с помощью font-size: 0;, нулевой из высоты строки через line-height: 0;:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style=""> 
    <tr> 
     <td valign='top' align='center' style='font-size:0; line-height: 0;'> 
      <img src='#' align='top' width='620' border='0' style='display:block;'/> 
     </td> 
    </tr> 
    <tr> 
     <td valign='top' align='center' style='font-size:0; line-height: 0;'> 
      <a href='#' target='_blank'> 
       <img src='#' align='top' width='620' border='0' style='display:block;'/> 
      </a> 
     </td> 
    </tr> 
</table> 

ПРИМЕЧАНИЕ: Еслиline-height: 0; вызывает образы, чтобы полностью разрушиться, попробуйте line-height: 1;.

---

Я также вымыл дополнительные <tr> в конце и удалить кучу правил CSS, которые не влияют расстояния.

Answer 2

DOCTYPE Gmail может создавать дополнительное пространство под изображениями. Вот несколько обходных путей as mentioned in emailonacid website (они работают в Hotmail и Yahoo! Бета а):

1.) Добавить стиль отображения: блок изображения элемента

<img src=“test.jpg” style=“display:block”> 

2.) Добавить выравнивания absbottom в изображение элемента

<img src=“test.jpg” align=“absbottom”> 

3.) Добавить выравнивания texttop изображений элемента

<img src=“test.jpg” align=” texttop ”> 

4.) Добавить высоту строки 10px или ниже в содержащем TD

<td style=“line-height:10px”> 

5.) Добавить размера шрифта 6px или ниже в содержащем TD

<td style=“font-size:6px”>