web-dev-qa-db-fra.com

Espacement des tables de messagerie Gmail

Je sais que ce cheval a à peu près été battu à mort .. mais j'ai un problème d'espacement de table Gmail qui me frappe juste ce matin.

<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>

Peu importe ce que je fais, la première image du tableau (layout_v3_18) toujours a un espacement en dessous. Environ 2 à 3 pixels d'espace blanc dans Gmail. Se produit sur quelques autres images dans l'e-mail, mais le reste fonctionne bien. Peu importe combien de fois je compare les tableaux, cela ne fonctionnera pas.

Pensées?

emailgmail
37
Craig Hooghiem

J'ai rencontré ce problème beaucoup récemment. Le code que nous avons trouvé qui fonctionne le mieux (lire: semble cohérent dans la plupart des clients de messagerie) est le suivant:

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

Ajoutez simplement l'affichage: bloquer à chaque image et cela résout le problème.

70
Stephen Walcher

En réponse à ma propre question (au cas où quelqu'un d'autre aurait un problème similaire), j'ai finalement trouvé le problème (ou une solution de toute façon).

J'ai ajouté un style="float: left" à l'image elle-même, ce qui l'a fixée par magie. Alternativement, l'utilisation de "display: block" tend à avoir un résultat similaire s'il est utilisé sur toutes les images, mais le flotteur semble effacer l'espacement spécifiquement pour GMail quand cela fonctionne parfaitement bien ailleurs.

4
Craig Hooghiem

En utilisant display:block sur les images a réduit l'espace entre les cellules de l'image mais n'a pas supprimé tous les espaces.

Ajout des attributs obsolètes padpadding/cellspacing sur la table parent (<table border="0" cellpadding="0" cellspacing="0">) ces dernières lacunes ont également disparu.

2
phils

Eu le même problème, j'ai ajouté la ligne ci-dessous

  style="line-height:1px;"

dans la balise td ci-dessus.

Dans mon modèle html dans la liste de fichiers.

2
Twiggy

Gmail peut ajouter des espaces blancs autour de n'importe quelle table, y compris les tables imbriquées.

Bien qu'un peu de piratage, l'ajout de ce qui suit comme style en ligne au tableau supprime l'espace blanc:

style="font-size:0.0em;" ...
2
Jon Taylor

J'ai eu le même problème et j'ai fait toutes les options de style ci-dessus mais rien n'a fonctionné. J'ai raccourci la hauteur de la table et il a supprimé tous les espacements.

1
Fernan Dasalla