outlook - por - Correo electrónico HTML: espacio en blanco entre las filas de la tabla

plantilla email html responsive

Question

Estoy construyendo un conjunto de tarjetas postales de correo electrónico y he tenido problemas con algunas versiones de Outlook y Gmail que crean espacios no deseados entre ciertas (pero no todas) las filas de la tabla.

Soy bastante nuevo en la codificación de correo electrónico HTML y necesito ayuda para solucionar problemas. ¿Alguien puede decirme qué se debe cambiar en mi código para resolver este problema?

Aquí está mi página de prueba: http://www.kristi.net/holidaycards/card_test.html

Y aquí hay una tapa de pantalla que muestra el problema en Outlook: http://i43.tinypic.com/34ezrc3.gif

Estos clientes se ven afectados:

Outlook 2007
Outlook 2010
Outlook 2013
Gmail (Android)
Gmail (Explorer)
Gmail (Chrome)

Además, solo para informarle, los usuarios abrirán el código HTML en su navegador y luego copiarán y pegarán el contenido en su cliente de correo electrónico (Outlook), antes de personalizar el texto y enviar el mensaje.

Answer 1

Necesitas style="display:block;" en tus imágenes. Pruebe algo como esto:

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

Debe tener en cuenta que estas lagunas son inevitables si alguien reenvía su correo electrónico de Outlook. Por esta razón, siempre es mejor dividir una imagen verticalmente.

Esto debería comenzar:

<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

Intenta agregar vertical-align: middle; estilo a sus imágenes algo así como:

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

Para mí fue suficiente agregar solo este estilo.