Spacers

Vertical spacing in HTML emails can be tricky, because of inconsistent support for 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

This is the simplest spacer you can use in an HTML email.

<div class="leading-64 sm-h-32">&zwnj;</div>

How it works:

  1. leading-64 adds line-height: 64px; - the default height, for desktop clients
  2. sm-h-32 sets height: 32px; for the sm breakpoint - the responsive height
  3. We use &zwnj; to add something inside, so it can take up height reliably in all email clients

Row

Use this one directly inside a <table>:

<tr>
  <td class="h-64 sm-h-32"></td>
</tr>

Table

The Row spacer, but as a full <table>.

<table class="w-full">
  <tr>
    <td class="h-64 sm-h-32"></td>
  </tr>
</table>