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