Implementing emails in 2021: Outlook specifics for spacing and vertical alignment in tables

This article is a part of the Implementing emails in 2021 series. If you missed the introduction, read Basics & how to test generated emails.

In this part, I will discuss some rules and best practices you should keep in mind when implementing your layout for Outlook.

When it comes to general reusable layouts in HTML and CSS, DIV element with padding and margin is the king. In Outlook, however, there are some limitations.

A bit about spacing in Outlook

Outlook doesn’t work well with CSS spacing defined via padding or margin on regular elements. Instead, you should work with just the following options:

• Typography elements (P, Hx, UL, LI) are using some default margins in Outlook. You can only (sometimes) make them 0, but not specific values that Outlook would respect.
• CSS spacing correctly applies only to table cells (TD) but unless you discard the extra table spacing (code sample below), there is no guarantee that you’ll get exactly the values you want.

So if you need a container with some spacing, using a table is a good choice.

Building a container table

We are going to start with a very simple 1x1 table that will allow us to apply the spacing later. In this article, I will stick to simple containers with sharp corners and white background, as implementing a container with rounded corners is a whole different story. However, understanding these fundamentals on which we will later build is critical.

The base code of a container table

Here is the code of our basic table container:

<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody style="margin: 0;padding: 0;">
        <tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
            <td style="font-family: Helvetica, sans-serif;font-size: 16px;margin: 0;padding: 0;font-weight: normal;line-height: 24px;background-color: #ffffff">
                [CONTENT]
            </td>
        </tr>
    </tbody>
</table>

The crucial part is to reset all possible spacings at all levels:

• Everything has margin and padding set to 0.
• TABLE resets all the attributes influencing spacing (cellspacing, cellpadding, border, width) in HTML attributes as well as in CSS.

It produces the following result as a base for our email body:

Applying padding

The next task is simple; you need to define the internal padding of your container. All you need to do is to add the padding to the style of your table cell. This will work the same for both Outlook and other email clients.

In our case, I applied 24px padding from all sides to match the design requirements.

Here is the final code, which differs only in padding from the previous code:

<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody style="margin: 0;padding: 0;">
        <tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
            <td style="font-family: Helvetica, sans-serif;font-size: 16px;margin: 0;padding: 24px;font-weight: normal;line-height: 24px;background-color: #ffffff">
                [CONTENT]
            </td>
        </tr>
    </tbody>
</table>

No other specialties needed. Our table layout already ensures the same baseline for both worlds.

This is what our result looks like:

It doesn’t have rounded corners yet, but it is a good start.

Other options for consistent spacing in a table

An alternative to using padding in a table cell is introducing extra table cells with a specific size. Include an optional top/bottom row for vertical spacing or a left/right column for horizontal spacing.

Here is a table sketch to give you an idea of what we are going to do next:

If some side doesn’t need spacing, you can just omit the respective row or column completely, and the rest is still going to work.

The code that would bring us the same visual result as the basic example with padding above is the following:

<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody style="margin: 0;padding: 0;">
        <tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
            <td style="font-size: 0;margin: 0;padding: 0;background-color: #ffffff"></td>
            <td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
            <td style="font-size: 0;margin: 0;padding: 0;background-color: #ffffff"></td>
        </tr>
        <tr style="margin: 0;padding: 0">
            <td style="font-size: 0;margin: 0;padding: 0;width: 24px;background-color: #ffffff"></td>
            <td style="font-family: Helvetica, sans-serif;font-size: 16px;margin: 0;font-weight: normal;line-height: 24px;background-color: #ffffff">
                [CONTENT]
            </td>
            <td style="font-size: 0;margin: 0;padding: 0;width: 24px;background-color: #ffffff"></td>
        </tr>
        <tr style="margin: 0;padding: 0">
            <td style="font-size: 0;margin: 0;padding: 0;background-color: #ffffff"></td>
            <td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
            <td style="font-size: 0;margin: 0;padding: 0;background-color: #ffffff"></td>
        </tr>
    </tbody>
</table>

You can see it is much more complex than the basic option, but keep this 3x3 layout in mind, as it is an interesting concept we will partially leverage in the next article.

Avoid margin if possible

margin is unreliable in Outlook, so I suggest only using padding for all email clients to keep things consistent and having just a single development strategy.

You can use the above TABLE container without a background to simulate negative space between elements via padding. We are using the top padding in the general flow of content, except for the very first element in the given container.

You can still consider using margin for some very special cases, but expect some thorough testing after every change related to that, as it can get easily broken in Outlook. That is why I try to avoid it completely.

Vertical alignment in a table cell

There is one more thing worth mentioning regarding Outlook and tables. If you have only an image inside a table cell, its vertical alignment seems to behave inconsistently sometimes.

We had this problem with a list of tasks shown in the previous article. Their overall layout is a table where there are checkbox images in the left column (checked or unchecked) with their respective task texts in the right column.

All table cells are aligned to the top, but we still experienced some inconsistencies in Outlook where image alignment to the top of a table cell was depending on whether the next table cell had one or more lines in its content. Notice how the second checkbox is misaligned with its text, despite the code and cell alignment being the same in both table rows:

This is the initial code of the checkbox table cell where you can verify that all alignments are really the same and to the top:

<td style="font-family: Helvetica, sans-serif;font-size: 14px;margin: 0;padding: 8px 0 0 0;margin-top: 0;font-weight: normal;line-height: 20px;width: 17px;vertical-align: top" valign="top" align="left">
    <img style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;max-width: 568px;width: 16px;margin-top: 0;height: 16px;vertical-align: text-bottom" width="16" height="16" src="https://assets-us-01.kc-usercontent.com/08579d62-9195-002a-ba92-56ecd6f1bf74/f0d77958-3a92-420f-9efd-7d488d29314c/checkbox_unchecked_16px.png" alt="[ ]">
</td>

All these alignments are correctly used by standard email clients, but Outlook somehow ignores them when the table cell contains only an image and uses its own logic.

Special character for help

I found a quick and simple fix to standardize the base image position in a table cell in this case. The fix is to include some actual text content in the table cell to make it look like it needs the same layout logic as the right cell with the text. But at the same time, we don’t want any text to appear to the user.

The magical formula, in this case, is a character ‌ (zero-width non-joiner), which I find very useful in many non-standard situations, even during standard web development. It doesn’t take any space, but at the same time acts as a character, so it is great to be used as a placeholder where other characters, even space, are not a good fit. You can read more about it here.

So if we just add this before the image, the initial position is the same as the position of text, and the image is then aligned to this invisible text, not to some volatile table cell boundaries that Outlook provides. Should you need to further adjust the image position, you can still leverage the inline vertical alignment shown in the previous article.

This is the adjusted code with ‌ added:

<td style="font-family: Helvetica, sans-serif;font-size: 14px;margin: 0;padding: 8px 0 0 0;margin-top: 0;font-weight: normal;line-height: 20px;width: 17px;vertical-align: top" valign="top" align="left">
    <!--[if mso]>&zwnj;<![endif]--><img style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;max-width: 568px;width: 16px;margin-top: 0;height: 16px;vertical-align: text-bottom" width="16" height="16" src="https://assets-us-01.kc-usercontent.com/08579d62-9195-002a-ba92-56ecd6f1bf74/f0d77958-3a92-420f-9efd-7d488d29314c/checkbox_unchecked_16px.png" alt="[ ]">
</td>

Note I added the extra character just for Outlook with the standard outlook conditional markup.

Here is the resulting output on both table rows consistently aligned to text bottom:

What’s next?

This was the fourth part of the Implementing emails in 2021 article series, but there is still more to learn. Continue with one of these articles based on what interests you the most or read the whole series:

• Implementing emails in 2021: Basics & how to test generated emails
• Implementing emails in 2021: Rounded buttons with shadow that work in Outlook 
• Implementing emails in 2021: How to create inline tags with vertical alignment that work in Outlook
• Implementing emails in 2021: Outlook specifics for spacing and vertical alignment in tables
• Implementing emails in 2021: How to add rounded corners to containers in Outlook

In my last article, I will show you how you can build a general container with rounded corners that works nicely even in Outlook.