Comment créer un remplissage dans un email HTML pour Outlook 2007, 2010 & 2013?

Question

Mon modèle de courrier électronique (tiré de https://github.com/internations/antwort) fonctionne parfaitement sur tous les clients de messagerie. Malheureusement, lorsque je tente de créer un simple bouton, le rembourrage ne fonctionne pas dans Outlook 2007, 2010 & 2013.

<a style="color:white; text-decoration:none;" href="http://"><span style="color: #ffffff;  background-color:#17aadf; font-weight: bold; font-size: 14px; padding:8px;margin-left: 8px; margin-right: 8px; margin-bottom: 8px; line-height: 24px; font-family:Arial, Helvetica, sans-serif">Konto aktivieren</span></a> 

Qu'est-ce qu'un bon travail autour pour voir padding (ou autre), même dans Outlook?

Answer 1

<span> est l'élément en ligne. Il n'a pas de navigateur padding. Essayez float:left ou supprimer padding et définir votre line-height à 32px

Answer 2

ajouter 1 plus propriété (display: inline-block;) et essayer

Answer 3

Vous devriez le mettre dans une table pour le courrier électronique html:

<table width="200" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td align="center" bgcolor="#17aadf" style="font-size: 14px; padding:8px; font-family:Arial, Helvetica, sans-serif;"> 
     <a style="color:#FFFFFE; text-decoration:none;" href="http://">Konto aktivieren</a> 
    </td> 
    </tr> 
</table> 

<br>Or even better - no padding:<br><br> 

<table width="200" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td align="center" valign="middle" height="35" bgcolor="#17aadf" style="font-size: 14px; font-family:Arial, Helvetica, sans-serif;"> 
     <a style="color:#FFFFFE; text-decoration:none;" href="http://">Konto aktivieren</a> 
    </td> 
    </tr> 
</table> 

sur une note de côté, vous devriez toujours utiliser l'hexagone à 6 chiffres, et Gmail ne respecte pas les couleurs pures de lien hypertexte noir ou blanc (d'où le #FFFFFE, au lieu de #FFFFFF)