A reliable and flexible component for all your vertical spacing needs

Vertical spacing in emails is tricky, 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.

There are 3 types of Spacers:

  1. Universal
  2. Table
  3. Table Row

Universal Spacer #

This is the most flexible Spacer component. Being a <div>, it can be used anywhere such an element is allowed. In our case: before/after tables, inside <td> / <th>, or inside other <div> elements.

The height of an Universal Spacer is defined by the line-height value, from the inline CSS.

Spacers are reset to be 30px high on mobile, for consistent vertical spacing. However, you can override this normalization with inline CSS: for Universal Spacers, add a height: XYpx; property, where XY is the same value as for the line-height.

Table Spacer #

The Table Spacer is a Universal Spacer inside a table. Doing this allows us to do further customisations, such as adding background colour, paddings, margins, or borders on the table/cell rather than on the <div> (better client support).

Table Row Spacer #

The Table Row Spacer is meant to be used inside a table. We frequently use it to add vertical spacing above or below the row that holds the columns - you can see it in several of Pine's components.

Height is defined through with the help of line-height and a height="" attribute. Mobile height can be overriden just like for Universal Spacers, with height: XYpx inline CSS.

If using an Table Row Spacer inside a 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.

Next Up: Stats →

Current Version