Vertical email spacing, with a dash of colour
Similar to Spacers, Dividers provide consistent vertical spacing while allowing to visually separate your content.
A Divider has a thin horizontal line in the middle, which you can style to suit your needs. Being 100% wide, it can be used anywhere a table is allowed: before/after other tables, or inside table cells or divs.
The spacing above and below the divider line is defined by adjusting the vertical padding of the inner <td>
element, through inline shorthand CSS.
Unlike Spacers, Divider height is not reset on mobile. Instead, you can adjust it by adding padding utility classes to the <td class="divider">
.
<!-- Same height on mobile -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="divider" style="padding: 24px 16px;">
<div style="background: #EEEEEE; height: 1px; line-height: 1px;"></div>
</td>
</tr>
</table>
<!-- Different height on mobile -->
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="divider py-sm-24" style="padding: 16px;">
<div style="background: #EEEEEE; height: 1px; line-height: 1px;"></div>
</td>
</tr>
</table>
Note: in the example above, a background colour was set on the <td class="divider"
, so that the height differences are noticeable.