Outlook Email Quirks

Issue

Outlook 2007+ on Windows uses Microsoft Word to render HTML emails, not a browser engine. This means modern CSS is heavily limited.

Workaround

Use tables for layout. Stick to inline styles and avoid CSS classes when possible. Use VML for images and shapes.

Code Example

/* ❌ Not recommended in Outlook */
div { display: flex; }

/* ✓ Better: use tables for Outlook */
<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

Issue

Outlook on Windows completely ignores media queries, so responsive design doesn't work.

Workaround

Create fixed-width emails (~600px). Use conditional comments for Outlook-specific CSS fallbacks.

Code Example

/* ✓ GOOD: Conditional MSO styles */
<!--[if mso]>
<style>
  table { width: 600px !important; }
</style>
<![endif]-->

Issue

Outlook sometimes doubles margin values or renders them unexpectedly, especially on table cells.

Workaround

Use padding on table cells instead of margins. Add border-collapse: collapse to tables.

Code Example

/* ✓ GOOD: Use padding instead of margin */
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td style="padding: 10px;">Content</td>
  </tr>
</table>

Issue

Outlook renders line-height unpredictably, sometimes creating extra space around text.

Workaround

Set line-height on the body/table and use display: block on elements to control spacing more predictably.

Code Example

/* ✓ GOOD: Use display: block and mso styles */
<p style="margin: 0; display: block; line-height: 1.5;">Text</p>
<!--[if mso]>
<p style="margin: 0; font-size: 14px; line-height: 18px;">Text</p>
<![endif]-->