Why does Outlook break so many email designs?

You send a beautifully crafted email. It looks perfect in Gmail, webmail, and even in iOS previews. Then you check it in Outlook—and the layout collapses. Text runs together. Images float off the page. Buttons vanish. It’s not a glitch. It’s a design flaw baked into how Outlook renders HTML.

Outlook uses the Microsoft Word rendering engine, which treats email like a document, not a webpage. It strips out or ignores many modern CSS rules that work elsewhere. What works in Chrome fails in Outlook because Word’s engine doesn’t support padding, flexbox, or responsive media queries the same way.

Designers assume their CSS behaves consistently across clients—until it doesn’t. This leads to inconsistent rendering, broken layouts, and missed engagement. One misrendered line of CSS can drop a campaign’s open-to-click rate by 20% or more. The cost? Lost conversions, lower deliverability, and wasted time.

Key takeaways

  • Outlook uses the Word rendering engine, which ignores or strips away modern CSS like flexbox, media queries, and padding.
  • Layouts that work in web browsers often collapse or shift in Outlook due to unsupported CSS rules.
  • Testing in Outlook during design is critical—what looks perfect in a preview may be broken for half of your audience.

What are the most common CSS pitfalls in Outlook email design?

Outlook’s outdated rendering engine, based on Word, breaks most modern CSS. You’ll see collapsed columns, missing margins, ignored fonts, and broken background images. Floats, grid, and flexbox are unsupported entirely. This isn’t a styling preference — it’s a technical barrier. Use tables, inline styles, and tested fallbacks to work around it. The best way to avoid deliverability and rendering issues is to test your emails in real Outlook clients. Email on Acid and W3C HTML spec confirm that table-based layouts remain essential for cross-client consistency.

Core problems with CSS in Outlook

  • Outlook struggles with nested table layouts — columns collapse or stack unpredictably, especially when using more than two levels of nesting.
  • Margin and padding are inconsistently applied; some versions of Outlook ignore them entirely unless set via inline styles in a table or td tag.
  • Font-size, line-height, and text-align may render incorrectly, sometimes ignoring the em or px values you specify — inline styles on td elements are more reliable.
  • Background images inside table cells often fail to load, especially in Outlook 2010–2019, due to limited support for CSS background properties.
  • Floats, flexbox, and CSS grid are not supported at all. Any code using these will either be ignored or cause layout failure.

How to build reliable emails for Outlook

Forget modern CSS. Your email must be built primarily with tables for structure. Use only inline styles for layout and styling — don’t count on external or internal CSS. Test every email in multiple versions of Outlook. If you're sending bulk campaigns, verify your list to avoid deliverability issues caused by invalid or outdated addresses. Bulk verify your email list to remove outdated or non-existent addresses before sending.

How does Outlook’s rendering engine impact email design?

Outlook 2007–2019 uses Word’s HTML engine, which strips out most CSS, ignores external stylesheets, and applies styles inconsistently. This forces you to use inline CSS and table-based layouts to ensure your email renders correctly across Outlook versions. Even Outlook on the web has partial support, but with quirks that make reliable rendering difficult without careful testing.

The Word engine: a legacy problem

Outlook 2007 through 2019 renders emails using Microsoft Word’s HTML engine, not a web browser. This means it treats email content like a document, not a webpage — and strips out or ignores many standard CSS rules like flexbox, grid, or even basic selectors like `img { width: 100%; }`. You’ll find that `height`, `padding`, and `margin` are often ignored, and `display: none` rarely works.

This engine doesn’t parse `

Keep reading