Inside spacing in Microsoft Outlook - how to display it correctly

mynewsletter.rocks uses for the Design of e-mail newsletters in modern HTML elements of type DIV. For example, headings and text are always contained in a DIV so that they can be arranged and moved in blocks.

To enable appealing layouts, an inner spacing can be defined for all text and heading elements in mynewsletter.rocks. Padding is designated. Inner spacing refers to the distance from the edge of an element to the content of the element - in the case of a text element, the distance from the edge to the text.

This image shows the same text once without spacing, with 10px and with 15px inner spacing:

The text is much easier to read at a distance, isn't it?

There is only one small problem with the internal spacing:

The behavior of Microsoft Outlook is not always predictable. Inside spacing in Microsoft Outlook in particular is not always displayed correctly.

However, because we always have to work with spacing for a nice newsletter design, it is necessary to find out under which circumstances Microsoft Outlook takes internal spacing into account.

In the absence of a set of rules swe start a series of experiments.

Experiment #1: DIVs with padding

First, we define a newsletter with 5 headlines, each contained in a DIV. Each of these DIVs has a spacing of 50px on one side. In addition, we add another heading that has no spacing on any page.

So that we can correctly assign a distance to the respective DIV, we use bright colors - even at the risk of getting eye cancer!

This is what the elements in the mynewsletter.rocks editor look like:

And this is the display in Microsoft Outlook 365:

We see:

The inner spacing in Microsoft Outlook is ignored to the left and right of the text, while the same spacing is assigned at the top and bottom.

Overall, the result does not look at all like we had imagined. 🙁

Experiment #2: DIVs with border on the page where we defined the padding

Even if it is anything but intuitive: what happens if we define a margin for each element, exactly on the side on which we have defined a distance?

I add a corresponding border with a width of 1px in the color grey to each element.

This is what it looks like in mynewsletter.rocks:

And this is the display in Microsoft Outlook 365:

This is more in line with our expectations.

But we would like to find out more about the behavior of internal spacing in Microsoft Outlook.

Experiment #3: What happens if we define an edge somewhere?

So we know that Microsoft Outlook takes an inside distance into account if a border is defined.

But which margin do we need to define? Is it enough to add a margin on any page? Does it have to be a margin on every page? Or is it enough if a margin is defined somewhere?

Let's try changing only the element with the spacing on the left-hand side and add a margin on the top side.

This is what the element looks like in mynewsletter.rocks:

And then again in Microsoft Outlook:

Disappointed?

But we have gained a new insight: If a margin is defined at the top and an inside distance on the left, Outlook ignores the inside distance on the left.

And what happens if we define an edge everywhere?

Experiment #4: Inside distance with margin on all sides

Let's define an element with an inner spacing on the left-hand side and a border on all sides.

This is how it looks in the newsletter editor:

And so in Microsoft Outlook:

The internal spacing is also taken into account in this case - although the spacing at the bottom is slightly larger than we had imagined.

In any case, we can confirm the result of experiment #2: Microsoft Outlook only considers an inner margin in DIVs if a margin is also defined on the same page.

And what happens if we use a table instead of a DIV?

Experiment #5: TABLE instead of DIV

In this experiment, instead of a DIV, we use a table with one row and one cell containing text for each element. As in experiment #1, we do not define a frame, but only an inner spacing for each page.

Once in the editor of mynewsletter.rocks:

And the result in Microsoft Outlook:

That looks as intended, doesn't it?

Conclusion: Padding in DIVs is only taken into account by Outlook if a margin is also defined on the corresponding page. Tables, on the other hand, do not have this problem as the padding is always taken into account. The minimum spacing on the bottom page is always slightly larger in Outlook than in other programs.

How mynewsletter.rocks solves the problem

Fortunately, as a user of mynewsletter.rocks, you don't have to worry about the whole social distancing issue.

In mynewsletter.rocks, all text elements are always based on DIVs.

When sending your newsletter, a separate ghost table is automatically defined for each DIV, which is only used when a recipient opens the email in Microsoft Outlook.

If there is an inner spacing without a border for the seire, a 1px border in the background color of the element is automatically assigned.

This ensures that your newsletter is also displayed in Microsoft Outlook (approximately) as you intended 🙂