padding

Client-by-client behaviour for padding

Fully supports padding (13): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Yahoo Mail, Samsung Mail, Thunderbird, HEY Mail, 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]-->