Margin
Responsive
Set vertical "margin" between elements.
| Class | Properties |
|---|---|
| .my-0 | Make a 0px spacer above and below |
| .mt-0 | Make a 0px spacer above |
| .mb-0 | Make a 0px spacer below |
| .my-1 | Make a 4px spacer above and below |
| .mt-1 | Make a 4px spacer above |
| .mb-1 | Make a 4px spacer below |
| .my-2 | Make a 8px spacer above and below |
| .mt-2 | Make a 8px spacer above |
| .mb-2 | Make a 8px spacer below |
| .my-3 | Make a 12px spacer above and below |
| .mt-3 | Make a 12px spacer above |
| .mb-3 | Make a 12px spacer below |
| .my-4 | Make a 16px spacer above and below |
| .mt-4 | Make a 16px spacer above |
| .mb-4 | Make a 16px spacer below |
| .my-5 | Make a 20px spacer above and below |
| .mt-5 | Make a 20px spacer above |
| .mb-5 | Make a 20px spacer below |
| .my-6 | Make a 24px spacer above and below |
| .mt-6 | Make a 24px spacer above |
| .mb-6 | Make a 24px spacer below |
| .my-7 | Make a 28px spacer above and below |
| .mt-7 | Make a 28px spacer above |
| .mb-7 | Make a 28px spacer below |
| .my-8 | Make a 32px spacer above and below |
| .mt-8 | Make a 32px spacer above |
| .mb-8 | Make a 32px spacer below |
| .my-9 | Make a 36px spacer above and below |
| .mt-9 | Make a 36px spacer above |
| .mb-9 | Make a 36px spacer below |
| .my-10 | Make a 40px spacer above and below |
| .mt-10 | Make a 40px spacer above |
| .mb-10 | Make a 40px spacer below |
| .my-12 | Make a 48px spacer above and below |
| .mt-12 | Make a 48px spacer above |
| .mb-12 | Make a 48px spacer below |
| .my-16 | Make a 64px spacer above and below |
| .mt-16 | Make a 64px spacer above |
| .mb-16 | Make a 64px spacer below |
| .my-20 | Make a 80px spacer above and below |
| .mt-20 | Make a 80px spacer above |
| .mb-20 | Make a 80px spacer below |
| .my-24 | Make a 96px spacer above and below |
| .mt-24 | Make a 96px spacer above |
| .mb-24 | Make a 96px spacer below |
| .my-32 | Make a 128px spacer above and below |
| .mt-32 | Make a 128px spacer above |
| .mb-32 | Make a 128px spacer below |
| .my-40 | Make a 160px spacer above and below |
| .mt-40 | Make a 160px spacer above |
| .mb-40 | Make a 160px spacer below |
| .s-0 | Make a spacer 0px tall |
| .s-1 | Make a spacer 4px tall |
| .s-2 | Make a spacer 8px tall |
| .s-3 | Make a spacer 12px tall |
| .s-4 | Make a spacer 16px tall |
| .s-5 | Make a spacer 20px tall |
| .s-6 | Make a spacer 24px tall |
| .s-7 | Make a spacer 28px tall |
| .s-8 | Make a spacer 32px tall |
| .s-9 | Make a spacer 36px tall |
| .s-10 | Make a spacer 40px tall |
| .s-12 | Make a spacer 48px tall |
| .s-16 | Make a spacer 64px tall |
| .s-20 | Make a spacer 80px tall |
| .s-24 | Make a spacer 96px tall |
| .s-32 | Make a spacer 128px tall |
| .s-40 | Make a spacer 160px tall |
Note: Margin is only supported on the top and bottom.
Margin Usage
There are two types of spacing Bootstrap Email supports. Padding (applied to the inside of table cells) and Margin (in the form of vertical spacers which are used to take up space between elements vertically).
Margin is very inconsistently supported in email clients. Instead of using margin in css the margin classes create spacers above and/or below and element for simpler syntax like Bootstrap. This example adds a spacer of 12px above and below the middle card. See space between for more info on adding spacers between elements.
<div class="card card-body">Top Card</div>
<div class="card card-body my-3">Middle Card (with margin above and below)</div>
<div class="card card-body">Bottom Card</div>
Top Card
Middle Card (with margin about and below)
Bottom Card
Spacer Usage
<div class="s-3"></div>
Spacers hold not content, they are just put into the document to sit between elements in a vertical flow.
Compiled Example
Input
<a class="btn btn-primary my-3" href="http://example.com">Button with mega margin</a>
Output
<table class="s-3 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 12px; font-size: 12px; width: 100%; height: 12px; margin: 0;" align="left" width="100%" height="12">
</td>
</tr>
</tbody>
</table>
<table class="btn btn-primary" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
<tbody>
<tr>
<td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
<a href="http://example.com" style="color: #ffffff; font-size: 16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; border-radius: 6px; line-height: 20px; display: inline-block; font-weight: normal; white-space: nowrap; background-color: #0d6efd; padding: 8px 12px; border: 1px solid #0d6efd;">Button with mega margin</a>
</td>
</tr>
</tbody>
</table>
<table class="s-3 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
<tbody>
<tr>
<td style="line-height: 12px; font-size: 12px; width: 100%; height: 12px; margin: 0;" align="left" width="100%" height="12">
</td>
</tr>
</tbody>
</table>