Outlook White Lines: Design Standards & Solutions

Purpose

This document outlines industry-standard design practices used to minimize white or gray lines in Outlook desktop emails. These standards reflect widely accepted email-design best practices and should be followed when creating email content.

Because of how Outlook renders email, these visual artifacts cannot be fully eliminated—only reduced through proper design techniques.

Background

Outlook desktop renders emails using Microsoft Word rather than a modern web browser. As a result, Outlook may introduce 1–2px gaps between stacked sections, particularly when background colors, images, or spacing are spread across multiple rows or containers.

This behavior is well-known across the email industry and affects all email platforms.

Required Design Standards

1. Image-Based Sections (Banners & Hero Areas)

Applies to: Client-created banners and graphics (your creative or marketing team)

When your team is creating banners or hero images for use in emails, follow these standards:

• Use a solid rectangle background behind all banner content
  (Do not rely on the canvas background color alone)
• Extend the background 1–2px beyond the canvas edges
• Flatten the entire banner into one single image
• Export banners as JPG

This “image bleed” approach significantly reduces visible seams when images are stacked in Outlook.

Avoid:

• Creating banners without a background layer
• Relying on canvas background color instead of a shape
• Splitting one visual section into multiple images
• Using PNG unless transparency is required

These recommendations apply to how banners are designed before upload, not how the email platform sends them.

2. Text with Background Color

When applying a background color to text blocks:

Always use padding—never spacers or line breaks.

Required padding values:

• Top: 20
• Bottom: 20
• Left: 20
• Right: 20

Do not use:

• Spacer blocks to increase background height
• Line breaks (<br>) for spacing

Padding must exist inside the same text container as the background color.

3. Background Color Usage

To reduce visible seams between sections:

• Avoid stacking multiple rows with the same background color
• Combine content into a single container whenever possible
• Alternate background colors between sections

Recommended layout pattern:

• Colored section
• White (or light) section
• Colored section

This structure minimizes row boundaries where Outlook commonly introduces gaps.

4. Image Formats

Use the correct image format based on use case:

• JPG → banners, hero images, background-style visuals
• PNG → logos, icons, and transparent elements

Key Principle

Fewer rows, fewer boundaries, fewer Outlook rendering gaps.

Acceptance Criteria

Minor visual differences in Outlook are expected and considered acceptable when:

• Industry-standard design techniques are followed
• Rendering appears correct in modern email clients such as Gmail, Apple Mail, and mobile apps