How to fix white lines in Outlook: what I found in testing
I reproduced white lines in classic Outlook and tested the popular fixes one at a time. Here is what actually happened.
Nicki Pabst Rasmussen
You probably know the bug. A thin white line appears between two coloured modules, but only in Outlook on Windows. You nudge a spacing value, the line disappears, and two new ones show up further down.
I wanted to know why that happens. I built a set of test emails, reproduced the line on purpose, and tried the fixes found in most guides. I changed one thing at a time and kept a control next to each test.
Why the lines appear
Classic Outlook renders email with Microsoft Word. Word is built for print, so it measures in points rather than pixels. At 96 DPI, one pixel is 0.75 points. A value such as 18px becomes 13.5pt, and that half point has to go somewhere. This conversion is the commonly accepted explanation for the bug.
Most guides stop there and tell you to use whole or even pixel values. That is not enough because Windows scales the result again. Many Outlook users run their screens at 125%, or 120 DPI, or 150%. At 125%, every CSS pixel becomes 1.25 screen pixels.
| CSS height | Points | Screen pixels at 125% | Screen pixels at 150% | Screen pixels at 175% |
|---|---|---|---|---|
| 123px | 92.25pt | 153.75 | 184.5 | 215.25 |
| 122px, even | 91.5pt | 152.5 | 183 | 213.5 |
| 124px, divisible by 4 | 93pt | 155 | 186 | 217 |
Try it yourself
Convert pixels to points
Word measurement
93pt ✅
A whole point value is green. A fractional point value is red because Word has to round it. Multiples of 4px always convert to whole points.
Only the last row produces whole numbers at every step. Four pixels is three points, and at 125% it is exactly five screen pixels. That is why the number four keeps showing up in advice about this bug, usually without an explanation.
How I tested
I tested in classic Outlook 2016, 2019, 2024 and Microsoft 365 on Windows at normal 100% scaling. I also tested Outlook 2019 at 120 DPI, or 125%.*
* I did not have 150% or 175% available. Those columns in the table are calculations, not test results.My first test email used normal modules with odd spacing and line heights. It showed no lines at all. That taught me the first lesson. The bug is hard to trigger on purpose, which helps explain why it feels random in real campaigns.
I built a stress test with four sections stacked on a white background:
- 30 navy text stripes with odd heights from 1px to 30px
- 30 navy text stripes with every value divisible by 4
- An image sliced into 12 separate tables with odd heights from 57px to 141px
- The same 12 slices rounded to the nearest multiple of 4
Outlook stress test
The actual slice heights from my test file
Odd heights
❌ Control4px heights
✅ On gridOne white line appeared between the 123px slice and the 83px slice. Every test file from then on started with an unchanged copy of that section as a control. The control showed the line every time. The bug is not random. It is tied to the layout.
Finally, I built a real campaign for Vandra, the Better Email demo coffee brand, in two versions. One used the values commonly seen in production files. The other used a 4px grid throughout.
What worked and what did not
Only one approach removed the lines everywhere I tested it. A 4px grid across the whole email. The patches did nothing, moved the line, or added more lines.
❌ Did not work
- ❌Matching the background colour
- ❌Combining slices in one table
- ❌Changing only the value beside the line
- ❌Outlook only point values
- ❌Zero font size and line height
- ❌Removing the images
✅ Worked
- ✅A 4px grid across the complete campaign
- ✅Images exported at exactly 1x or 2x
| Result | Fix | Why it worked or failed |
|---|---|---|
| ❌ | Matching background colour | The white line stayed, even with navy on every table and cell. |
| ℹ️ | Red body background | Line turned red. |
| ❌ | One table instead of many | The line moved up one slice. |
| ❌ | Fix the one value | That line disappeared, but two new lines appeared elsewhere. |
| ❌ | Outlook only value in pt | 93pt produced the same shifted result as changing the pixel value. |
| ❌ | Zero font size and line height | It added lines between several image slices and affected more Outlook versions. |
| ❌ | No images | Solid navy cells at the same odd heights still produced the line. |
| ❌ | 4px slices after an odd offset | A 3px spacer pushed every clean slice below it off the page grid. |
| ❌ | Images exported at 1.45x instead of 2x | Three lines, same places on a second run. |
| ✅ | 4px grid | Every module boundary, line height and image slot stayed on whole point and screen pixel positions. |
Five results that surprised me
NP 01
Only the body background shows through
Most guides say the line is the body background showing through. That is true, but matching your wrapper or table colours does not help. I put navy on every table and cell, and the line stayed white. When I made the body red, the line turned red. The gap goes straight through to the body, past every background in between.
NP 02
Only what is above a line decides where it lands
Adding content below the line, even a whole extra image, did not move it. But changing a single height above can create new lines further down. That is why nudging one value by 1px often seems to move the problem instead of fixing it.
NP 03
Zero line height makes it worse
In this test it added several extra lines between image slices. When I applied it globally to every table row, lines appeared in Outlook 2019, 2024 and 365 as well.
NP 04
A clean module is not enough
The same 4px image slices were clean until I placed a 3px spacer above them. A line then appeared in Outlook 2016 at 100%. That result showed that Outlook tracks the position on the complete page. One odd spacer can push every module below it away from the grid.
NP 05
How you scale an image matters
I took image slices that were clean when exported at exactly 2x, and exported them at 1.45x instead. Same HTML, same displayed sizes. Three white lines appeared, in the same places both times I ran it. Images exported at 2x with slightly wrong proportions stayed clean. Export your images at exactly 1x or 2x the size you show them at.
Vandra before and after
The typical Vandra campaign used spacing of 15, 25 and 27 pixels, a line height multiplier of 1.5, and images displayed at whatever height their proportions produced. In Outlook 2016 at normal scaling, it had a line under the mountain image. It also had a thin line at the top of one of the three soil photos.
The 4px version looks nearly identical. Values moved by one or two pixels. Spacing changed from 15px to 16px, line height changed from 1.5 to 24px, and a 711px image became 712px. It was clean in all five clients.
The line in the row of three photos was the day 45 image's own light edge, not Outlook. The top row of pixels in the source file was almost white, left over from when it was cut out. Before you blame Outlook, zoom in on the edges of your images.
Run every test twice
One line in one test does not prove a rule. I saw a line under the Vandra hero once, but I could never reproduce it. Run every test twice before you build a recommendation around the result. A repeatable line is evidence. A one-off line is only a lead.
The fix: build on a 4px grid
Make every vertical value a multiple of 4. That includes spacer cell heights, line height, borders and the displayed height of every image. Use table cells with explicit width and height values for spacing. Every value then converts to whole points and whole screen pixels at 100% and 125%. The same calculation holds at 150% and 175%.
Set line heights in pixels, never as a multiplier. A 15px font with line height 1.5 gives 22.5px before Outlook starts converting. Add mso-line-height-rule: exactly so Outlook uses your value rather than its own.
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#1B1F3B">
<tr>
<td width="32" style="width: 32px;"> </td>
<td style="font-size: 28px; line-height: 36px; mso-line-height-rule: exactly; color: #ffffff;">
Spring collection is here
</td>
<td width="32" style="width: 32px;"> </td>
</tr>
<tr>
<td colspan="3" height="16" style="height: 16px; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td width="32" style="width: 32px;"> </td>
<td style="font-size: 16px; line-height: 24px; mso-line-height-rule: exactly; color: #ffffff;">
New colours, new fabrics and free shipping this week.
</td>
<td width="32" style="width: 32px;"> </td>
</tr>
<tr>
<td colspan="3" height="24" style="height: 24px; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td>
</tr>
<tr>
<td width="32" style="width: 32px;"> </td>
<td>
<img src="hero.png" width="536" height="300" alt="Spring collection" style="display: block; width: 536px; height: 300px; border: 0;">
</td>
<td width="32" style="width: 32px;"> </td>
</tr>
<tr>
<td colspan="3" height="32" style="height: 32px; font-size: 1px; line-height: 1px; mso-line-height-rule: exactly;"> </td>
</tr>
</table>
For images, export scale matters. Use files exported at exactly 1x or 2x the displayed size. In my repeatable test, image slices exported at 1.45x produced three lines while the same slices exported at exactly 2x stayed clean.
Thin dividers are easy to miss. A 1px rule converts to 0.75pt. Test it carefully, or use 4px of spacing instead.
You do not need to worry about what your ESP adds at the top. A tracking pixel and a hidden preheader did not push my 4px campaign off the grid.
What to drop from your toolbox
- Matching background colours as a fix. It did not hide the line in my tests.
- Zero font size and line height on table rows. It added lines.
- Nudging single values by 1px until the line goes away. It moves the line instead.
Put the grid in your design system
One odd value pushes every module below it off the grid. This is not a reliable campaign by campaign fix. Put it in the design system, where every module is built once.
- Use a spacing scale of 4, 8, 12, 16, 24, 32 and 48px
- Give every text style a pixel line height divisible by 4
- Lock image slots to heights divisible by 4 and export images at exactly 1x or 2x
- Keep each module in its own table and use explicit spacer cells at its edges
When the modules are right, campaign builders cannot knock the rest of the email off the grid by accident. That is the difference between fixing white lines and not getting them.
How long does this matter?
The new Outlook for Windows does not use the Word engine, so it does not have this bug. Classic Outlook is still supported for years, and many companies continue to use it. If classic Outlook appears in your open data, a 4px grid costs almost nothing and removes the most common cause of these lines.
I tested at 100% and 125% scaling. If you still see white lines in a campaign built fully on a 4px grid, send me a screenshot. I would like to test it.
You can make the 4px grid part of an email design system, so every campaign starts with the same Outlook safe modules.
