How to Get Rid of White Lines in Outlook Emails

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

When it comes to email development there is one certainty that all email developers are familiar with; Outlook will cause you headaches. 

In this case we’re looking specifically at one of the most infamous bugs with Outlook; the seemingly random white lines that can get added to your email. The cause of many a headache and frustrated Google search for email developers and marketers alike.

The inconvenient truth is that there’s no magic wand to wave and make those lines disappear, but there are steps we can take to minimize the impact of this bug on your meticulously crafted emails. 

Here we’ll take a dive into what causes them to appear and how we can quash those pesky lines.

In the Trenches: A Dev’s Battle with the 1px Line Bug 

I first encountered the line bug whilst working on an Email on Acid Newsletter. Design was approved, the code was finished and we were running final QA checks. After testing on my live devices and the Email on Acid testing platform, every test looked good to me and I handed it off for the final set of tests. That’s when I got the Slack ping: 

“Hey Alex, what are these lines in Outlook?”

Example of a white line in Outlook from an old Email on Acid newsletter

I was perplexed, checked my tests and everything looked a-okay. It was only after re-testing the same code three times that I could replicate the issue. That’s where the headaches began. “Should be a simple fix,” was my first thought. I shuffled a few background colors and figured that’d be the end of it. My new tests looked good but after a few re-tests the issue persisted. 

And it’s been a persistent rendering issues for email developers everywhere.

So, why do white lines appear in Outlook?

Despite Microsoft being fully aware of this head scratching bug no official word has come in the years it’s been plaguing the email development community. It tends to creep up on Windows desktop versions of Outlook, but the white lines can also be a problem for Outlook 365.

Although we can’t be sure, the leading theory is that it comes from the pixel to point conversion that Outlook does, when a line-height, height or font-size is converted from px to pt and ends up as a decimal, the leftover decimal point is added as an ugly white line.

6 methods for fixing white lines in Outlook emails

The flexibility to create emails in a diverse variety of structures and formats is a boon for developers, granting us the liberty to code according to our preferences. 

However, this versatility comes with the inherent challenge of navigating through trial and error when it comes to resolving bugs like the one at hand.

If you’re experiencing these dreaded white lines, you may need to try a few of the fixes below to get rid of them in your emails.

1. Adjusting Heights, Line-heights and Font Sizes

This is the first fix that anyone struggling with these lines should be adjusting your heights, line-heights and font-sizes.

Because of the aforementioned conversion and decimal problem, you’ll want to set all of these to even numbers. Even better if they are divisible by 4. So using font-sizes of 16 or 20 will generally be safer than 18, for example.

Make sure that you’re changing these everywhere, not just the problem section, you don’t want to fix the lines in one area of your email just to have them crop up again later.

2. Adding Outlook-specific Ghost Breaks

If changing your heights and font sizes doesn’t do the trick, you can try adding Outlook-specific ghost breaks into the problem sections to smooth out the heights.

Much like ghost tables, the ghost break is a way to force a line break that is only for the problem clients.

3. Using Microsoft-Specific Code in the Head

Although Microsoft-specific code (MSO) can get quite complicated, this snippet of code is fairly straight forward.

We’re telling the client, in this case Outlook, that we want to collapse all the borders in the email to zero. You’ll want to add this to your Head section. Even though the default border value is already 0, this can still sometimes solve the issue – bizarre!

It’s worth noting that you should be sure to test after trying this code, depending on how your email is structured it can have an adverse effect on your email rendering in Outlook. 

That being said, I’ve used this a few times when the other fixes haven’t alleviated my white line headaches.

4. Using Non-Breaking Spaces

Some email developers have reported that the issue is down to Outlook converting white space, rather than uneven heights. 

The suggested fix for this is to include a non-breaking space ( ) before you close your table cell (

This will, of course, add some extra white space below your copy, so when trying this fix make sure you’re aware of how it’ll impact your designs.

5. Covering up with Background Colors

The white lines that Outlook adds inherit the color from the tag. So, by setting the background color of the to the same color as our problem section, we essentially cover up the lines. They’re still there, yes, but your subscribers won’t see them. We also want to only target the problem clients. 

There’s no need to change the background color of clients that render the email correctly.

Simply add this code to the of your email with the background color changed to match the problem section.