Spacers

Vertical spacing in HTML emails can be tricky, mainly because of inconsistent support for (and rendering of) margin, padding, and <br> tags.

Here's how easy it is to create simple yet reliable spacers for your emails, using basic HTML and Tailwind CSS utility classes.

Div

The most reliable and versatile spacer for HTML emails.

src/templates/example.html
<div class="leading-16" role="separator">&zwnj;</div>

How it works:

  1. leading-16 sets the spacer's height with line-height: 64px;
  2. role="separator" improves accessibility by telling screenreaders to treat this as a separator
  3. &zwnj; adds 'content' inside, so that the <div> can take up height reliably in all email clients

You may specify a different height for smaller devices, by using Tailwind's sm: breakpoint prefix:

<div class="leading-16 sm:leading-8" role="separator">&zwnj;</div>

Table

Styling <table> and <td> is better supported than <div> in HTML emails, particularly in Outlook for Windows.

If you need more control over the styling of your Spacer, use this one instead:

src/templates/example.html
<table class="w-full" role="separator">
  <tr>
    <td class="leading-16">&zwnj;</td>
  </tr>
</table>

Row

Need to add space between <table> rows?

src/templates/example.html
<tr role="separator">
  <td class="leading-16">&zwnj;</td>
</tr>

The default ARIA role for a <tr> is row, so we use role="separator" to indicate that this is a separator, not a table row.

Semantic

We can use an <hr> to create a semantic Spacer.

src/templates/example.html
<hr class="border-0 text-white my-16 min-h-full">

How it works:

  • we hide the line by resetting the border
  • we give it the same color as the background of the page (for Outlook)
  • we control the height with top and bottom margins

The min-h-full class is used for compatibility with Apple email clients.


Copyright © 2022 Maizzle Edit this page on GitHub