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 ` ` from screen readers.
` `	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 ` `’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>

Are your preferences up to date?

Make sure we are recommending the best content for you.

(spacer)

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>

Are your preferences up to date?

Make sure we are recommending the best content for you.

(spacer)

Are your preferences up to date?

Make sure we are recommending the best content for you.