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.


The most reliable and versatile spacer for HTML emails.

<div class="leading-64" role="separator">&zwnj;</div>

How it works:

  1. leading-64 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-64 sm:leading-32" role="separator">&zwnj;</div>


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:

<table class="w-full" role="separator">
    <td class="leading-64">&zwnj;</td>


Need to add space between <table> rows?

<tr role="separator">
  <td class="leading-64">&zwnj;</td>

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.


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

<p>Paragraph about the weather</p>
<hr class="border-0 text-white my-64 min-h-full">
<p>Paragraph about my day at work</p>

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.