A reliable and flexible component for all your vertical spacing needs
Vertical spacing in emails is hard, 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.
It comes in 3 flavours:
The Universal Spacer is 100% wide and can be used anywhere a table is allowed: above/below other tables, or inside <td> or <th> elements.
So in Pine you can basically use it:
The only difference between the Universal and Wrapper spacers is that the Wrapper Spacer has an inner row table, which you can set a background colour on. Oh, and Universal is more lightweight, too.
The gray rows above and below are 80px high universal spacers.
On mobile, the first two get resized to 30px, while the last remains at 80px because of the height set with inline CSS.
The Wrapper spacer must be used on its own, outside other wrappers.
It's useful when you need some top/bottom space for your email body, as well as for adding space between wrappers when using the individual wrappers approach.
You can also set the background colour on the inner row table, so it matches your other rows.
Simply place it as a top-level table in the body of your HTML:
The Row Spacer is simply the inner <tr> and <td> of the Universal Spacer.
It can be used to add vertical space inside a row table, above or below the row that holds the columns.
As simple as it is, it's included because <table> and <tr> elements have unreliable CSS margin support, and padding doesn't work on them.
You can change the spacer height by adjusting the value in the height="" attribute, as well as the font-size and line-height inline CSS.
Important: if you don't change all three values (i.e. you only change the height="" attribute), you will encounter rendering issues in Outlook 2016 (empty white lines).
On mobile, the spacer height is forced to 30px, for consistent mobile vertical spacing.
You can override this if you need to: