Skip to main content

padding in Outlook Classic

PartialMicrosoft Word · desktop

Fix & Workaround

Outlook ignores padding on <a> tags. Use the MSO font-width trick with &#8202; hair spaces, or use VML. React Email's <Button> handles this automatically.

Before

<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; display: inline-block;
         text-decoration: none;">
  Click Here
</a>

After

<!--[if mso]>
<table role="presentation" cellpadding="0" cellspacing="0" border="0"
  style="border-collapse: collapse;">
  <tr>
    <td style="background-color: #6d28d9; padding: 0;
               mso-padding-alt: 12px 32px;">
      <!--[if mso]>
      <i style="letter-spacing: 32px; mso-font-width: -100%;
                mso-text-raise: 18pt;" hidden>&#8202;</i>
      <![endif]-->
      <a href="https://example.com"
        style="background-color: #6d28d9; color: #fff;
               mso-text-raise: 9pt; text-decoration: none;
               font-family: Arial, sans-serif; font-size: 14px;
               font-weight: bold;">Click Here</a>
      <!--[if mso]>
      <i style="letter-spacing: 32px; mso-font-width: -100%;"
         hidden>&#8202;</i>
      <![endif]-->
    </td>
  </tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com"
  style="background-color: #6d28d9; color: #fff;
         padding: 12px 32px; display: inline-block;
         text-decoration: none;">
  Click Here
</a>
<!--<![endif]-->

Use MSO font-width trick for reliable button padding in Outlook

Other Clients

ClientSupport
GmailSupported
Gmail AndroidSupported
Gmail iOSSupported
Outlook 365Supported
Outlook (New)Partial
Outlook iOSSupported
Outlook AndroidSupported
Apple MailSupported
Apple Mail iOSSupported
Yahoo MailSupported
Samsung MailSupported
ThunderbirdSupported
HEY MailSupported
SuperhumanSupported

Related Features

Test your email across all 15 clients

Preview rendering, catch CSS issues, and get actionable fixes — free.

Try Emailens Free