How to create padding in html email for Outlook 2007, 2010 & 2013?

Question

My email template (taken from https://github.com/internations/antwort ) works perfectly on all email clients . Unfortunately when I try to create a simple button, the padding does not work in 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> 

What's a good work around to see padding (or whatever) even in Outlook?

Answer 1

<span> is inline element. He haven't crossbrowser padding . Try float:left or remove padding and set your line-height to 32px

Answer 2

You should put it into a table for html email:

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

On a side note, you always should use the 6-digit hex, and Gmail doesn't respect pure black or white hyperlink colors (hence the #FFFFFE, instead of #FFFFFF)

Answer 3

再添加1个属性（ display：inline-block; ）并尝试