Gmail Email Table Spacing

Question

Sé que este caballo casi ha sido golpeado hasta la muerte ... pero tengo un problema de espacio en la tabla de Gmail que me está acabando esta mañana.

<td valign="top"> 
     <img src="###/enewsletter_layout_v3_18.jpg" alt="" /> 
     <table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;"> 
      <tr> 
       <td valign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;"> 
       New Patient Special Offer <br/> 
       Save $$$ 
       </td>     
      </tr> 
      <tr> 
       <td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;"> 
        <h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1> 
        If you have read anything in this newsletter and have any questions or would like to 
        discuss further, please contact <br/> 
        The Centre at (555) 555-5555 
       </td>     
      </tr>   
     </table> 

    </td> 

No importa lo que haga, la primera imagen de la mesa hay (layout_v3_18) siempre tiene el espaciamiento debajo de ella. Aproximadamente 2-3 píxeles de espacio en blanco en Gmail. Ocurre en un par de otras imágenes en el correo electrónico, pero el resto funciona bien. No importa cuántas veces compare las tablas, no funcionará.

¿Pensamientos?

Answer 1

En realidad, me he encontrado recientemente con este problema. El código se encontró que funciona mejor (es decir: parece constante en la mayoría de los clientes de correo) es la siguiente:

<img src="###" style="display: block;" /> 

Basta con añadir el display: block de cada imagen y se soluciona el problema.

Answer 2

En respuesta a mi propia pregunta (en caso de que alguien más tenga un problema similar), finalmente encontré el problema (o una solución de todos modos).

He añadido un style="float: left" a la imagen misma, que lo ha arreglado mágicamente. Alternativamente, usar "display: block" tiende a tener un resultado similar si se usa en todas las imágenes, pero el flotador parece borrar el espaciado específicamente para GMail cuando funciona perfectamente bien en otro lugar.

Answer 3

Gmail puede agregar espacios en blanco alrededor de cualquier tabla, incluidas las tablas anidadas.

Aunque un poco de un corte añadiendo lo siguiente como un estilo en línea a la mesa elimina el espacio en blanco:

style="font-size:0.0em;" ... 

Answer 4

tenían el mismo problema, añadí debajo de la línea

style="line-height:1px;" 

en el td etiqueta arriba.

En mi plantilla html en la lista de archivos.

Answer 5

El uso de display:block en las imágenes redujo algo de espacio entre las celdas de imagen pero no eliminó todas las lagunas.

Añadiendo los atributos obsoletos cellpadding/cellspacing en la tabla padre (<table border="0" cellpadding="0" cellspacing="0">) esos últimos huecos desaparecieron también.

Answer 6

Tuve el mismo problema e hice todas las opciones de estilo anteriores pero nada funcionó. Hice la altura de la mesa más corta y eliminó todas las separaciones.