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" bgcolor="#F1F5F8" style="padding: 30px 15px;">
      <div style="background: #d0d8de; 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-10" bgcolor="#F1F5F8" style="padding: 30px 15px;">
      <div style="background: #d0d8de; 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.