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:
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
<th>, or inside other
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
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).
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.
colspan=""attribute on the spacer's
<td>element, and make it equal to the maximum number of columns used in that row.