box-sizing

Client-by-client behaviour for box-sizing

Fully supports box-sizing (12): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook iOS, Outlook Android, Apple Mail, Apple Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Superhuman.

No support (3): Outlook (New), Outlook Classic, Yahoo Mail. Plan fallbacks for these clients before relying on box-sizing in production sends.

Fixes & Workarounds

<div style="width: 300px; padding: 20px;
            box-sizing: border-box;">
  Content — total width stays 300px
</div>

<!-- Set width to content-width (300 - 40 = 260px) -->
<div style="width: 300px;">
  <div style="padding: 20px;">
    Content — padding on inner element
  </div>
</div>

<div style="width: 300px; padding: 20px;
            box-sizing: border-box;">
  Content — total width stays 300px
</div>

<!-- Set width to content-width (300 - 40 = 260px) -->
<div style="width: 300px;">
  <div style="padding: 20px;">
    Content — padding on inner element
  </div>
</div>

<div style="width: 300px; padding: 20px;
            box-sizing: border-box;">
  Content — total width stays 300px
</div>

<!-- Set width to content-width (300 - 40 = 260px) -->
<div style="width: 300px;">
  <div style="padding: 20px;">
    Content — padding on inner element
  </div>
</div>

Production guidance for box-sizing

box-sizing is a CSS property. Across the email client matrix, 12 of 15 tracked clients support it fully, 0 only partially, and 3 not at all. The clients most likely to require a workaround for this feature are Outlook (New), Outlook Classic, Yahoo Mail. Each of them needs a tailored fallback — see the per-client examples above for the specific code fix Emailens recommends.

When in doubt, ship a baseline that renders without box-sizing and treat it as progressive enhancement on clients where support is verified. Emailens automatically detects cross-client divergence on this feature when you preview an email, so you can see exactly which template paths break before a campaign goes out.