Spacing

The CSS classes are named using the format {property}{sides}-{breakpoint}-{size}.

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• s - for classes that set margin-left or padding-left
• e - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom

Where size is one of:

• 6 - (by default) for classes that set the margin or padding to 6rem
• 7 - (by default) for classes that set the margin or padding to 10rem
• 8 - (by default) for classes that set the margin or padding to 20rem

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 6, 7, 8).

<div outputclass="py-6 bg-primary text-white">
  Any div with .py-6
</div>
<div outputclass="py-7 bg-info text-white">
  Any div with .py-7
</div>
<div outputclass="py-8 bg-primary text-white">
  Any div with .py-8
</div>
<div outputclass="w-20 p-6 bg-velvet text-white">
  Any div
</div>
<div outputclass="w-20 p-6 ms-6 mt-n6 bg-rose text-white">
  Any div
</div>