How do I ensure my email displays correctly on Outlook desktop?

You will learn

• Why Outlook Desktop displays emails differently than other clients
• The most common Outlook Desktop rendering issues and why they happen
• How to avoid these issues using the Workshop editor
• A quick reference guide for troubleshooting rendering problems

Why Outlook renders emails differently

You've spent time crafting a polished email. It looks perfect in the editor preview, and it looks great on Mac or in webmail. Then a colleague on a Windows PC opens it in Outlook Desktop, and the layout is off: text is misaligned, spacing is wrong, and mysterious white lines cut across the design.

This isn't something you're doing wrong. It's one of the most well-documented problems in email, and it affects every platform that sends HTML emails, not just Workshop.

Most email clients (Gmail, Apple Mail, Outlook on Mac, mobile apps) use a modern web browser engine to display HTML emails. Outlook Desktop on Windows does not. Instead, it uses Microsoft Word's rendering engine, which was designed for print documents rather than modern HTML and CSS. As a result, it handles layout, spacing, and styling very differently than other clients.

This affects Outlook 2007, 2010, 2013, 2016, 2019, and some configurations of Microsoft 365 Desktop on Windows. The new Outlook for Windows (rolling out gradually) uses a modern web engine, but most organizations are still running the classic desktop version.
 

⚠️ Key takeaway: The same email will look different on Outlook Desktop (Windows) versus Mac, mobile, or webmail. This isn't a Workshop bug — it's a fundamental limitation of how Outlook renders HTML on Windows.

Common Outlook Desktop rendering issues

Here are the most frequent rendering problems you may encounter when recipients view your Workshop emails on Outlook Desktop for Windows.

Padding gets ignored or shifted

This is the single most common complaint. You add padding to a text block or image to create clean spacing, and Outlook either ignores it entirely, applies it inconsistently, or shifts content around. For example, if you place text next to an image in a two-column row and use padding to create breathing room, Outlook may collapse that padding, push the image to an unexpected position, or add unwanted gaps elsewhere.

Why: Outlook's Word engine doesn't reliably support CSS padding on many HTML elements. It only consistently applies padding to table cells, not to content blocks themselves. When the editor generates padding on a content block, Outlook may simply discard it.

Random white lines across the email

Thin white horizontal lines appear seemingly at random, often cutting through rows or between sections. They're especially visible when your email uses a coloured background. This is one of the oldest and most persistent Outlook bugs.

Why: The leading theory is that Outlook converts pixel values to points during rendering. When a line-height, height, or font-size converts to a decimal point value, Outlook adds a 1-pixel gap to account for the rounding. These lines inherit the colour from the email body background, making them visible against coloured rows.

 

Multi-column layouts misalign

Two-column or three-column rows (e.g., an image next to text, or a row of headshots) may stack vertically instead of sitting side by side, or columns may appear at slightly different widths than intended.

Why: Outlook doesn't support modern CSS layout properties like float or flexbox. It relies on HTML tables for column structure and applies its own interpretation of widths, sometimes rounding values unpredictably.

 

Background images disappear

If you set a background image on a row or section, it may render perfectly on every client except Outlook Desktop, where recipients see only the background colour (or nothing at all).

Why: Outlook Desktop doesn't support the CSS background-image property. This is a hard limitation with no simple workaround in the editor.

 

Rounded corners become square

Buttons, image containers, or content blocks with rounded corners will display with sharp, square corners in Outlook Desktop.

Why: Outlook's rendering engine doesn't support the CSS border-radius property. Workshop can apply a workaround for buttons specifically, but full content areas will render square.

 

Animated GIFs show only the first frame

Any animated GIF you insert will appear as a static image (just the first frame) in Outlook Desktop.

Why: Older desktop versions of Outlook don't support GIF animation. Make sure the first frame of any GIF conveys the essential message on its own.

How to avoid these issues in the Workshop editor

You don't need to write any code. The Workshop editor gives you the tools to structure your emails in a way that minimises Outlook problems.

 

✨ Best Practice: Use row structure for spacing instead of content padding. Outlook handles rows (which become table cells in the HTML) far more reliably than padding applied to individual content blocks.

 

Strategy 1: Use empty columns for side spacing

Instead of adding left/right padding to a text or image block to create margins, use a multi-column row and leave the outer columns empty.

• Drag in a 3-column row (or a row with narrow side columns and a wider centre column).
• Place your content in the centre column.
• Leave the left and right columns empty, or insert a Spacer block set to a small height (e.g., 4px).
• This creates visual side margins that Outlook cannot break, because the spacing is defined by the column structure itself, not by CSS padding.
  
   

Strategy 2: Use Spacer blocks for vertical spacing

Instead of relying on top/bottom padding on content blocks, insert a dedicated Spacer block between sections.

• Go to the Content tab and drag a Spacer into your row above or below the content that needs space.
• Adjust the Spacer height to control the gap.
• This produces a reliable, consistent gap across all email clients, because Outlook reads the spacer as a real table element with a defined height.
  
   

Strategy 3: Match background colours to hide white lines

The random white lines that Outlook inserts inherit their colour from the email's overall body background. You can make them invisible.

• Open the Settings tab in the editor.
• Set the Background colour to match the background colour of your rows.
• If your email has rows with different background colours, set the body background to the most dominant colour.
  
   

Note: This doesn't remove the lines — they're still technically there — but recipients won't see them because the line colour matches the surrounding area.

 

Strategy 4: Keep multi-column layouts simple

Outlook handles two-column rows reasonably well, but more complex layouts (three or more columns, unequal splits) increase the risk of misalignment.

• Stick to 1-column or 2-column rows where possible.
• Use the Columns Structure setting (in Row properties) to adjust column widths rather than trying to force widths with padding.
• Avoid putting images and text in the same column when precise alignment is critical — use separate columns instead.
  
   

Strategy 5: Use even font sizes

Because of Outlook's pixel-to-point conversion, odd or unusual font sizes can trigger rounding errors that cause white lines or spacing shifts.

• Use font sizes that are divisible by 4 (e.g., 12px, 16px, 20px) for the most reliable rendering.
• Avoid very small font sizes (below 10px), as Outlook enforces minimum sizes on table cells.
  
   

Strategy 6: Design GIFs with the first frame in mind

Since Outlook Desktop will only display the first frame, ensure that the first frame of any animated GIF contains the key message or visual. Treat the animation as a bonus for non-Outlook recipients, not as a requirement for understanding the content.

Quick reference: issues and editor fixes

Getting help

Microsoft is gradually rolling out the "New Outlook for Windows," which uses a modern web rendering engine instead of the Word-based one. As your organisation's users migrate to this new version, these rendering issues will disappear. Until then, following the strategies above will ensure your emails look professional and consistent across all versions of Outlook.

If you run into a layout issue you can't resolve, the Workshop support team is always available to help troubleshoot and, if needed, adjust your templates directly.