Spacer

Vertical spacing in emails is tricky, because of inconsistent support for margins, padding, and br tags. The spacer component in MailBox helps create consistent vertical spacing between rows.

MailBox uses 5 types of vertical spacing.

ClassValue
.spacer-small15px
.spacer-medium30px
.spacer-large60px
.spacer-xlarge75px
.spacer-huge135px

These spacers are created to maintain design consistency across the email.

Spacer Small

Small spacer applied to create space between two paragraphs of same group of information. Add class .spacer-small to manage small spacing between content. The default value of this is 15px and it is easily adjustable from .settings.scss file.

Code
<!-- Spacer Small -->
<table class="spacer-small" cellpadding="0" cellspacing="0" align="center" role="presentation" border="0">
   <tbody>
      <tr>
         <td class="spacer-small" valign="middle" align="center">&nbsp;</td>
      </tr>
   </tbody>
</table>>
Preview

Spacer Medium

Small medium applied to create space between headings, buttons and paragraphs of same group of information. Add class .spacer-medium to manage small spacing between content. The default value of this is 30px and it is easily adjustable from .settings.scss file.

Code
<!-- Spacer Small -->
<table class="spacer-medium" cellpadding="0" cellspacing="0" align="center" role="presentation" border="0">
   <tbody>
      <tr>
         <td class="spacer-medium" valign="middle" align="center">&nbsp;</td>
      </tr>
   </tbody>
</table>>
Preview

Spacer Large

Large medium applied to manage space between content and edges of module. Add class .spacer-large to manage small spacing between content. The default value of this is 60px and it is easily adjustable from .settings.scss file.

Code
<!-- Spacer Small -->
<table class="spacer-large" cellpadding="0" cellspacing="0" align="center" role="presentation" border="0">
   <tbody>
      <tr>
         <td class="spacer-large" valign="middle" align="center">&nbsp;</td>
      </tr>
   </tbody>
</table>>
Preview

Spacer xLarge

Spacer xLarge applied to manage space between content and edges of module. Add class .spacer-large to manage small spacing between content. The default value of this is 75px and it is easily adjustable from .settings.scss file.

Code
<!-- Spacer Small -->
<table class="spacer-xlarge" cellpadding="0" cellspacing="0" align="center" role="presentation" border="0">
   <tbody>
      <tr>
         <td class="spacer-xlarge" valign="middle" align="center">&nbsp;</td>
      </tr>
   </tbody>
</table>>
Preview

Spacer Huge

Spacer huge applied to manage space between content and edges of module. Add class .spacer-large to manage small spacing between content. The default value of this is 135px and it is easily adjustable from .settings.scss file.

Code
<!-- Spacer Small -->
<table class="spacer-huge" cellpadding="0" cellspacing="0" align="center" role="presentation" border="0">
   <tbody>
      <tr>
         <td class="spacer-huge" valign="middle" align="center">&nbsp;</td>
      </tr>
   </tbody>
</table>>
Preview