padding in Outlook Classic
PartialMicrosoft Word · desktop
Fix & Workaround
Outlook ignores padding on <a> tags. Use the MSO font-width trick with   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> </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> </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
| Client | Support |
|---|---|
| Gmail | Supported |
| Gmail Android | Supported |
| Gmail iOS | Supported |
| Outlook 365 | Supported |
| Outlook (New) | Partial |
| Outlook iOS | Supported |
| Outlook Android | Supported |
| Apple Mail | Supported |
| Apple Mail iOS | Supported |
| Yahoo Mail | Supported |
| Samsung Mail | Supported |
| Thunderbird | Supported |
| HEY Mail | Supported |
| Superhuman | Supported |
Related Features
Test your email across all 15 clients
Preview rendering, catch CSS issues, and get actionable fixes — free.
Try Emailens Free