padding

Client-by-client behaviour for padding

Fully supports padding (19): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, AOL Mail, Fastmail, Superhuman.

Partial support (2): Outlook (New), Outlook Classic. Expect rendering quirks unique to each engine. Partial support typically means a subset of values, an ignored shorthand, or sanitizer-specific rewrites.

When to use padding in email

• Adding vertical breathing room above and below CTA buttons inside <td> cells.
• Creating responsive content gutters by combining cell padding with max-width on the outer table.
• Constructing card-style sections by combining padding with background-color and border-radius.

Rendering behaviour and edge cases

• Outlook on Windows applies padding inconsistently on <div> elements , use <td> with padding for layout instead.
• Apple Mail and modern Gmail honor shorthand padding values, but older Yahoo Mail builds occasionally drop the bottom value.
• When padding is set on a button anchor, some clients add their own native button padding on top, doubling the apparent space.

Recommended fallback strategy

Apply padding to <td> elements rather than <div> wrappers whenever possible. Keep padding within a single shorthand declaration to avoid Outlook reordering issues. For large hero spacing, use spacer rows with line-height instead of padding when targeting Outlook 2007–2019.

Fixes & Workarounds

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

<!--[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]-->