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 Acorn 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 32px 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 simple table with an empty cell that has height and line height set. 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 Acorn'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