Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/maizzle/maizzle.com/llms.txt

Use this file to discover all available pages before exploring further.

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 simplest vertical spacer for HTML emails:
emails/example.html
<div class="leading-4" role="separator">&zwj;</div>
How it works:
  1. leading-4 sets the spacer’s height with line-height: 16px;
  2. role="separator" indicates the element is a divider, improving accessibility
  3. &zwj; adds ‘content’ inside, so that the <div> can take up height
You may specify a different height for smaller devices by using the sm: screen variant:
emails/example.html
<div class="leading-4 sm:leading-2" role="separator">&zwj;</div>
Responsive heights will only work in email clients that support @media queries.
The div spacer is also available as a component.

​
Row

Need to add space between <table> rows?
emails/example.html
<tr role="separator">
  <td class="leading-4">&zwj;</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.
emails/example.html
<hr class="border-0 text-white my-4 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.
Do not add role="separator" on the <hr> spacer, as it is implied.