Comment supprimer l’écart entre les images dans les newletters envoyées sur Hotmail et Yahoo ?  Ci dessous une newsletter avec les séparations entre les images et sans.

Ces courriers sont structurés à partir d’un tableau (balise <table>) dans lequel on place les images.

<table><tr>
...
<td width="261" height="152" align="right" valign="top" style="white-space:nowrap; border-collapse:collapse; font-size:0;">
<img src="images/monImage.jpg" alt="mon texte" width="261" height="152" border="0" style="display:block; margin:0; border:none;" /></td>
...

La méthode

  1. Construire un tableau (table) au pixel près.  Chaque cellule doit avoir une largeur et une hauteur précise.
  2. Chaque cellule doit avoir un alignement horizontal et vertical
  3. Dans une balise style sur chaque cellule (<td>) on doit préciser :
    • la gestion des espaces blanc (white-space:nowrap)
    • une bordure commune pour les cellules (border-collapse:collapse)
    • remettre à zéro la hauteur de la police (font-size:0;)
  4. Chaque image de chaque cellule doit reprendre la taille exacte de la cellule
  5. Elles doivent avoir une balise <alt> seule visible quand l’image est bloquée
  6. La balise border à zéro
  7. On peut leur ajouter du style pour renforcer (display, margin, border)

L’écart entre les images est supprimé grâce à la remise à zéro de la taille de la fonte.