Spacers

Spacers are used to add separation between table rows.

Base

The best way to control spacing between components in HTML email is to use padding (applied to <td>’s) and margin (applied to <h> tags, <p>’s, <ol>’s, <li>’s, etc.).

However padding and margin cannot be used reliably to space out <table>’s or <tr>’s. In these cases, it's best to use a spacer to create separation.

<tr>
<td aria-hidden="true" height="30" style="font-size: 0px; line-height: 0px;">
&nbsp;
</td>
</tr>
(size of the spacer)

Syntax

Name Description / Purpose
height Size of the spacer.
aria-hidden="true" Hide the &nbsp; from screen readers.
&nbsp; Some email clients will collapse the spacer’s height if there’s no content.
style="font-size: 0px; line-height: 0px;" Some clients will add additional space inherited from the &nbsp;’s font-size and line-height.
background-color Optional Spacers are transparent by default but can be any color.

Examples

Spacer between two table rows

Create separation between two table rows in the same section.

<tr>
<td></td>
</tr>
<tr>
<td aria-hidden="true" height="30" style="font-size: 0px; line-height: 0px;">
&nbsp;
</td>
</tr>
<tr>
<td></td>
</tr>
alt_text

Are your preferences up to date?

Make sure we are recommending the best content for you.

(spacer)
alt_text

Are your preferences up to date?

Make sure we are recommending the best content for you.

Spacer between two sections

Create separation between two email sections.

<tr>
<td style="background-color: #ffffff;" class="bar"></td>
</tr>
<tr>
<td aria-hidden="true" height="30" style="font-size: 0px; line-height: 0px;">
&nbsp;
</td>
</tr>
<tr>
<td style="background-color: #ffffff;" class="bar"></td>
</tr>
alt_text

Are your preferences up to date?

Make sure we are recommending the best content for you.

(spacer)
alt_text

Are your preferences up to date?

Make sure we are recommending the best content for you.