A reliable and flexible component for all your vertical spacing needs
Vertical spacing in emails can be 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.
On mobile, Universal Spacers are reset to 0 height, to allow for greater customisation flexibility. As can be seen in the examples, we can use inline
height: CSS to keep the desktop height, or we can use mobile spacing utility classes to define a different height for the Spacer on mobile.
<div class="spacer py-sm-16" style="line-height: 32px;"></div>
Note: Parsedown Extra currently has issues displaying code properly. That div should have a zero-width non-joiner inside - see it on GitHub ↗
The Table Spacer is a simple table with an empty cell that has a height set. Since CSS styling support for
<td>s is pretty solid across the board, we can do further customisations such as adding background colour, paddings, or borders on the table/cell.
<table cellpadding="0" cellspacing="0" role="presentation" width="100%"> <tr> <td class="spacer py-sm-16" height="32"></td> </tr> </table>
Just as with Universal Spacers, these can also be customised with either inline CSS
height:, or through mobile spacing utility classes.
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.
<tr> <td class="spacer py-sm-16" height="32"></td> </tr>
Height is defined with a
height="" attribute, and you can of course customise mobile height just like for the other Spacers.
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 any given row inside that table.