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:

0-8 - for classes that set the margin or padding to various rem sizes.

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). These negative margins can be applied using the @margin attribute with a dash separator (e.g., margin="t-6" for .mt-n6).

Any div with .py-6

Any div with .py-7

Any div with .py-8

Any div

<div padding="y6" color="primary">
  Any div with .py-6
</div>
<div padding="y7" color="info">
  Any div with .py-7
</div>
<div padding="y8" color="warning">
  Any div with .py-8
</div>
<div width="40" padding="6" outputclass="bg-velvet text-white">
  Any div
</div>
<div width="40" padding="6" margin="s6 t-6" outputclass="bg-rose text-white">
  Any div
</div>

<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-40 p-6 bg-velvet text-white">
  Any div
</div>
<div outputclass="w-40 p-6 ms-6 mt-n6 bg-rose text-white">
  Any div
</div>