A reliable and flexible component for all your vertical spacing needs

Vertical spacing in emails is hard, because of inconsistent support for margins, padding, and <br /> tags.
The spacer component in Pine helps create consistent vertical spacing between and inside wrappers and rows,
and inside columns.

It comes in 3 flavours:

  • Universal
  • Wrapper
  • Row

Universal Spacer

The Universal Spacer is 100% wide and can be used anywhere a table is allowed: above/below other tables, or inside <td> or <th> elements.

So in Pine you can basically use it:

  • outside wrapper tables
  • in the <td> of wrapper tables, just like a row
  • inside a column

The only difference between the Universal and Wrapper spacers is that the Wrapper Spacer has an inner row table, which you can set a background colour on. Oh, and Universal is more lightweight, too.

Example: Universal Spacer
The gray rows above and below are 80px high universal spacers.
On mobile, the first two get resized to 30px, while the last remains at 80px because of the height set with inline CSS.

Wrapper Spacer

The Wrapper spacer must be used on its own, outside other wrappers.
It's useful when you need some top/bottom space for your email body, as well as for adding space between wrappers when using the individual wrappers approach.

You can also set the background colour on the inner row table, so it matches your other rows.

Simply place it as a top-level table in the body of your HTML:

Example: Wrapper Spacer


Row Spacer

The Row Spacer is simply the inner <tr> and <td> of the Universal Spacer.
It can be used to add vertical space inside a row table, above or below the row that holds the columns.

If using a Row spacer inside a row table that has 2 or more columns, you need to add the colspan="" attribute on the spacer's <td> element, and make it equal to the maximum number of columns used in that row.

As simple as it is, it's included because <table> and <tr> elements have unreliable CSS margin support, and padding doesn't work on them.

Example: Row Spacer

12 column

Spacer Customisation

You can change the spacer height by adjusting the value in the height="" attribute, as well as the font-size and line-height inline CSS.

Important: if you don't change all three values (i.e. you only change the height="" attribute), you will encounter rendering issues in Outlook 2016 (empty white lines).

Spacer on Mobile

On mobile, the spacer height is forced to 30px, for consistent mobile vertical spacing.

You can override this if you need to:

  • Globally: by changing the CSS in the @media query
  • Individually: by adding the height with inline CSS on the <td> element in the spacer table
Check the examples above: the bottom spacers are using the 'individually' technique.

Theme Mountain

Current Version