Email client CSS: what works, what fails, and what to avoid
Resumen: Web CSS documentation describes ideal behavior. Email CSS documentation describes survival behavior. Can I email indexes properties by client the way Can I use covers browsers. Before you ship a clever layout, search margin, flexbox, and background-image there and accept the verdict.
Start from Can I email, not from Chrome DevTools
Web CSS documentation describes ideal behavior. Email CSS documentation describes survival behavior. Can I email indexes properties by client the way Can I use covers browsers. Before you ship a clever layout, search margin, flexbox, and background-image there and accept the verdict.
Gmail strips most head styles unless you use supported inlining workflows or embedded style blocks in specific contexts. Outlook desktop ignores flex and grid entirely. Apple Mail supports media queries many teams wish were universal. Your baseline must work without them.
Email Chart recommends table layouts for structure, inline styles for critical presentation, and media queries as progressive enhancement for clients that support them.
Layout primitives that still work
Nested tables with role=presentation, fixed widths near six hundred pixels, and cellpadding/cellspacing controlled explicitly remain the industry default because they fail predictably instead of catastrophically.
Use padding on td cells instead of margin on divs when Outlook compatibility matters. Margin on paragraphs sometimes works in WebKit clients and fails in Word-based Outlook.
For two-column sections, split at six hundred pixels with stacked rows on mobile using media queries, but keep a single-column fallback that looks intentional without queries.
Images, retina, and dark mode
Always include width and height attributes on img tags to reduce layout shift when images are blocked. Alt text is mandatory for accessibility and for the era when images-off is default in corporate inboxes.
Retina assets at two times resolution downscaled with width attributes look sharp in Apple Mail and Gmail. Outlook may ignore max-width on images unless paired with table constraints.
Dark mode fixes include meta color-scheme hints, explicit background colors on tables, and swapped logo assets. Test both modes in Outlook and Apple Mail, not just iOS dark theme.
Patterns to retire in 2026
JavaScript, iframe embeds, form elements, and video tags belong on landing pages, not in email. Clients strip or sandbox them.
External stylesheets linked in head are unreliable. Embedded style blocks help some clients but still require inline critical rules for Gmail.
Position absolute, float-heavy layouts, and CSS grid for core structure create support tickets. If a technique requires a Medium post from 2017 to explain Outlook hacks, budget time accordingly or simplify.
Nested tables with role=presentation, fixed widths near six hundred pixels, and cellpadding/cellspacing controlled explicitly remain the industry default because they fail predictably instead of catastrophically.Fuentes
Preguntas frecuentes
Should I inline all CSS?
Inline critical layout and typography rules. Keep a small embedded style block for media queries where supported, but never rely on head-only styles for Gmail.
Are MJML or React Email worth it?
Yes when they compile to table-based, inline-safe HTML and you treat the output as a starting point for QA, not a guarantee.
Does Outlook Web match Outlook desktop?
No. Outlook on the web renders closer to modern browsers than Outlook desktop on Windows. Always test both if your list includes enterprise addresses.