Padding
Responsive
Add padding to table cells
| Class | Properties |
|---|---|
| .p-0 | padding: 0px; |
| .px-0 | padding-left: 0px; padding-right: 0px; |
| .py-0 | padding-top: 0px; padding-bottom: 0px; |
| .pt-0 | padding-top: 0px; |
| .pr-0 | padding-right: 0px; |
| .pb-0 | padding-bottom: 0px; |
| .pl-0 | padding-left: 0px; |
| .p-1 | padding: 4px; |
| .px-1 | padding-left: 4px; padding-right: 4px; |
| .py-1 | padding-top: 4px; padding-bottom: 4px; |
| .pt-1 | padding-top: 4px; |
| .pr-1 | padding-right: 4px; |
| .pb-1 | padding-bottom: 4px; |
| .pl-1 | padding-left: 4px; |
| .p-2 | padding: 8px; |
| .px-2 | padding-left: 8px; padding-right: 8px; |
| .py-2 | padding-top: 8px; padding-bottom: 8px; |
| .pt-2 | padding-top: 8px; |
| .pr-2 | padding-right: 8px; |
| .pb-2 | padding-bottom: 8px; |
| .pl-2 | padding-left: 8px; |
| .p-3 | padding: 12px; |
| .px-3 | padding-left: 12px; padding-right: 12px; |
| .py-3 | padding-top: 12px; padding-bottom: 12px; |
| .pt-3 | padding-top: 12px; |
| .pr-3 | padding-right: 12px; |
| .pb-3 | padding-bottom: 12px; |
| .pl-3 | padding-left: 12px; |
| .p-4 | padding: 16px; |
| .px-4 | padding-left: 16px; padding-right: 16px; |
| .py-4 | padding-top: 16px; padding-bottom: 16px; |
| .pt-4 | padding-top: 16px; |
| .pr-4 | padding-right: 16px; |
| .pb-4 | padding-bottom: 16px; |
| .pl-4 | padding-left: 16px; |
| .p-5 | padding: 20px; |
| .px-5 | padding-left: 20px; padding-right: 20px; |
| .py-5 | padding-top: 20px; padding-bottom: 20px; |
| .pt-5 | padding-top: 20px; |
| .pr-5 | padding-right: 20px; |
| .pb-5 | padding-bottom: 20px; |
| .pl-5 | padding-left: 20px; |
| .p-6 | padding: 24px; |
| .px-6 | padding-left: 24px; padding-right: 24px; |
| .py-6 | padding-top: 24px; padding-bottom: 24px; |
| .pt-6 | padding-top: 24px; |
| .pr-6 | padding-right: 24px; |
| .pb-6 | padding-bottom: 24px; |
| .pl-6 | padding-left: 24px; |
| .p-7 | padding: 28px; |
| .px-7 | padding-left: 28px; padding-right: 28px; |
| .py-7 | padding-top: 28px; padding-bottom: 28px; |
| .pt-7 | padding-top: 28px; |
| .pr-7 | padding-right: 28px; |
| .pb-7 | padding-bottom: 28px; |
| .pl-7 | padding-left: 28px; |
| .p-8 | padding: 32px; |
| .px-8 | padding-left: 32px; padding-right: 32px; |
| .py-8 | padding-top: 32px; padding-bottom: 32px; |
| .pt-8 | padding-top: 32px; |
| .pr-8 | padding-right: 32px; |
| .pb-8 | padding-bottom: 32px; |
| .pl-8 | padding-left: 32px; |
| .p-9 | padding: 36px; |
| .px-9 | padding-left: 36px; padding-right: 36px; |
| .py-9 | padding-top: 36px; padding-bottom: 36px; |
| .pt-9 | padding-top: 36px; |
| .pr-9 | padding-right: 36px; |
| .pb-9 | padding-bottom: 36px; |
| .pl-9 | padding-left: 36px; |
| .p-10 | padding: 40px; |
| .px-10 | padding-left: 40px; padding-right: 40px; |
| .py-10 | padding-top: 40px; padding-bottom: 40px; |
| .pt-10 | padding-top: 40px; |
| .pr-10 | padding-right: 40px; |
| .pb-10 | padding-bottom: 40px; |
| .pl-10 | padding-left: 40px; |
| .p-12 | padding: 48px; |
| .px-12 | padding-left: 48px; padding-right: 48px; |
| .py-12 | padding-top: 48px; padding-bottom: 48px; |
| .pt-12 | padding-top: 48px; |
| .pr-12 | padding-right: 48px; |
| .pb-12 | padding-bottom: 48px; |
| .pl-12 | padding-left: 48px; |
| .p-16 | padding: 64px; |
| .px-16 | padding-left: 64px; padding-right: 64px; |
| .py-16 | padding-top: 64px; padding-bottom: 64px; |
| .pt-16 | padding-top: 64px; |
| .pr-16 | padding-right: 64px; |
| .pb-16 | padding-bottom: 64px; |
| .pl-16 | padding-left: 64px; |
| .p-20 | padding: 80px; |
| .px-20 | padding-left: 80px; padding-right: 80px; |
| .py-20 | padding-top: 80px; padding-bottom: 80px; |
| .pt-20 | padding-top: 80px; |
| .pr-20 | padding-right: 80px; |
| .pb-20 | padding-bottom: 80px; |
| .pl-20 | padding-left: 80px; |
| .p-24 | padding: 96px; |
| .px-24 | padding-left: 96px; padding-right: 96px; |
| .py-24 | padding-top: 96px; padding-bottom: 96px; |
| .pt-24 | padding-top: 96px; |
| .pr-24 | padding-right: 96px; |
| .pb-24 | padding-bottom: 96px; |
| .pl-24 | padding-left: 96px; |
| .p-32 | padding: 128px; |
| .px-32 | padding-left: 128px; padding-right: 128px; |
| .py-32 | padding-top: 128px; padding-bottom: 128px; |
| .pt-32 | padding-top: 128px; |
| .pr-32 | padding-right: 128px; |
| .pb-32 | padding-bottom: 128px; |
| .pl-32 | padding-left: 128px; |
| .p-40 | padding: 160px; |
| .px-40 | padding-left: 160px; padding-right: 160px; |
| .py-40 | padding-top: 160px; padding-bottom: 160px; |
| .pt-40 | padding-top: 160px; |
| .pr-40 | padding-right: 160px; |
| .pb-40 | padding-bottom: 160px; |
| .pl-40 | padding-left: 160px; |
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).
<a class="btn btn-primary p-3" href="http://bootstrapemail.com">A Button with lots of padding</a>
Compiled Example
Input
<a class="btn btn-primary p-5" href="http://example.com">Button with mega padding</a>
Output
<table class="btn btn-primary p-5" 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: 20px; border: 1px solid #0d6efd;">Button with mega padding</a>
</td>
</tr>
</tbody>
</table>