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 Pine helps create consistent vertical spacing between and inside Wrappers and Rows, and inside Columns.

There are 3 types of Spacers:

• Universal
• Table
• Row

Universal

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.

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-20" style="line-height: 40px;">‌</div>

Table

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-20" height="40"></td>
  </tr>
</table>

Just as with Universal Spacers, these can also be customised with either inline CSS height:, or through mobile spacing utility classes.

Row

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.

<tr>
  <td class="spacer py-sm-20" height="40"></td>
</tr>

Height is defined with a height="" attribute, and you can of course customise mobile height just like for the other Spacers.