---
title: "Outlook White Lines: Design Standards & Solutions"
url: "https://help.evolvedoffice.com/en/article/outlook-white-lines-design-standards-solutions"
language: "en"
last_updated: "2026-01-16T22:13:05.977Z"
---

# 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