web-dev-qa-db-fra.com

espace blanc supplémentaire entre les tables dans les e-mails html pour le client gmail

Mon code est à

http://jsfiddle.net/user1212/G86KE/4/

Le problème est que dans gmail, il laisse un espace blanc supplémentaire entre 2 tables à l'intérieur de la même cellule. J'ai essayé display:block; margin:0; padding:0; line-height:0;

Cependant, cela ne semble pas disparaître.

enter image description here

Y a-t-il une solution à cela?

htmlcsshtml-email
13
user544079

Le style des mails HTML est horrible.

Quelques conseils:

border-spacing:0; /*this should fix the spacing problem*/

Vous devez l'appliquer à toutes les tables que vous utilisez, vous devez donc l'inclure dans un <style> bloquer en haut comme ceci:

<head>
  <style>
    table {border-spacing: 0;}
  </style>
</head>

(désolé pour le mauvais formatage, le code a refusé de s'afficher correctement sur plusieurs lignes)

5
Anders Arpi

L'utilisation de style = "display: block" dans la balise d'image devrait fonctionner. Aussi, n'oubliez pas pour l'ajouter à l'image d'espacement si vous l'utilisez.

11
Hannah F Hudson

Il suffit d'ajouter style="line-height:50%" sur la <table>. Vous remarquerez que cela affectera la hauteur des lignes de texte si vous avez du texte dans votre mailer. Pour résoudre ce problème, vous devrez ensuite ajouter: style="line-height:100%" à la <td> avec texte.

2
Mandlaness

Je sais que ce n'est pas ce que vous cherchez, mais ...
Lâchez l'espaceur (spacer.gif), afin de perdre les grands espaces dans un e-mail réactif, les images doivent être incorporées dans une cellule par ligne, ce qui affichera toutes les images bloquées.
J'espère que ça aide, c'est la solution que j'ai utilisée dans mon cas.
Une cellule par ligne:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="image.jpg" width="600" height="300" />
        </td>
    </tr>
</table>
2
sealview

display:block a très bien fonctionné pour le problème d'écart entre mon corps et mon pied de page, mais cela n'a rien fait pour ma tête; les autres correctifs non plus. Je sais que c'est un vieux fil, mais au cas où quelqu'un tomberait dessus et que ce qui précède n'a pas aidé, cela l'a fait pour moi:

Ajouter style="line-height:1px; font-size:0.0em;" à la <td> tag qui contient votre table d'en-tête.

Vous devrez peut-être essayer quelques balises différentes pour trouver la bonne, mais c'est une autre solution à essayer.

1
jrod

Je sais donc que cela peut sembler un peu sauvage, mais j'ai eu exactement le même problème et il s'est avéré que c'était les brs de mon code. Oui, le fait que j'ai formaté mon code HTML en imbriquant mes tds a conduit Gmail à ajouter de nouveaux tds avec des balises br à l'intérieur.

Il m'a fallu du temps pour réaliser que nous convertissions le code de l'en-tête et du pied de page de l'e-mail en texte avant de l'ajouter à nos e-mails.

Si vous utilisez une approche similaire, je suggère de "réduire" votre code HTML.

Au lieu de:

<table>
    <tr>
        <td>
            Content
        </td>
    </tr>
</table>

Essayer:

<table><tr><td>Content</td></tr></table>

Aussi horrible que cela puisse paraître.

1
ariebear

Eh bien, j'ai remarqué que le contenu de l'en-tête et du corps sont en fait des tableaux dans une autre cellule. Pourquoi n'essayez-vous pas de séparer l'en-tête et le corps et de les déplacer sur leur ligne séparée?

Quelque chose comme ça:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
       <!-- Header table -->
    </td>
  </tr>

  <tr>
    <td>
       <!-- Body table -->
    </td>
  </tr>
</table>

Aussi, juste un conseil, n'utilisez pas <center> tag pour centrer le contenu. Si vous êtes dans une cellule d'un tableau, utilisez simplement align="center". Cela s'applique également à la table entière, donc pour centrer une table, il suffit de définir la propriété align sur center.

0
cristianbote

Outre l'ajout de display:block à votre img ajoutez également cellpadding="0" cellspacing="0" border="0" à votre table (important: n'oubliez pas d'appliquer cela à votre emballage table également)

À votre santé

0
vaskort