Spacers

Vertical spacing in HTML emails can be tricky, because of inconsistent support for margin, padding, and <br> tags. Here's how to create simple yet reliable spacers for your emails, using basic HTML and Tailwind CSS.

---

The Div

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

Being a <div>, it can be used anywhere such an element is allowed. In our case: before/after a <table>, inside <td> or <th>, or inside other <div> elements.

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

Here's the idea:

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

Custom top/bottom heights

In case the sm-h-{$size} classes you have defined in your (custom?) Tailwind CSS config are not enough, you can double up by using padding instead:

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

sm-h-0 will reset the height to zero on the sm breakpoint, and sm-py-64 will add 128px of total padding,

The Row

Use this one directly inside a <table>:

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

By default, Maizzle will transform the inline CSS height: 64px; to a height="64" attribute, for consistent email client support.

The Table

A simple table with an empty cell that has a height set. Use it anywhere you can't use a Div or Row spacer.

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td class="h-64 sm-h-32"></td>
  </tr>
</table>

Accessibility

Unless actually displaying tabular data in an email, always add role="presentation" to your tables.