box-sizing

Client-by-client behaviour for box-sizing

Fully supports box-sizing (16): Gmail, Gmail Android, Gmail iOS, Outlook 365, Outlook (New), Outlook iOS, Outlook Android, Outlook for Mac, Apple Mail, Apple Mail iOS, Samsung Mail, Thunderbird, HEY Mail, Proton Mail, Fastmail, Superhuman.

No support (5): Outlook Classic, Yahoo Mail, Yahoo Mail Android, Yahoo Mail iOS, AOL 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>

<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>

<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>

<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>

<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>

<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, 16 of 21 tracked clients support it fully, 0 only partially, and 5 not at all. The clients most likely to require a workaround for this feature are Outlook Classic, Yahoo Mail, Yahoo Mail Android. 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.