📪Spacing
Margin Classes
.mt-{number}
.mt-{number}
Applies a margin-top to the element.
CSS equivalent: margin-top: {number}px;
Example usage:
<div class="mt-10">This element has a top margin of 10 pixels.</div>
.mb-{number}
.mb-{number}
Applies a margin-bottom to the element.
CSS equivalent: margin-bottom: {number}px;
Example usage:
<div class="mb-20">This element has a bottom margin of 20 pixels.</div>
.ml-{number}
.ml-{number}
Applies a margin-left to the element.
CSS equivalent: margin-left: {number}px;
Example usage:
<div class="ml-15">This element has a left margin of 15 pixels.</div>
.mr-{number}
.mr-{number}
Applies a margin-right to the element.
CSS equivalent: margin-right: {number}px;
Example usage:
<div class="mr-30">This element has a right margin of 30 pixels.</div>
.mx-{number}
.mx-{number}
Applies a margin to both the left and right sides of the element.
CSS equivalent: margin-left: {number}px; margin-right: {number}px;
Example usage:
<div class="mx-10">This element has a left and right margin of 10 pixels.</div>
.my-{number}
.my-{number}
Applies a margin to both the top and bottom sides of the element.
CSS equivalent: margin-top: {number}px; margin-bottom: {number}px;
Example usage:
<div class="my-5">This element has a top and bottom margin of 5 pixels.</div>
.m-{number}
.m-{number}
Applies a margin to all sides of the element.
CSS equivalent: margin: {number}px;
Example usage:
<div class="m-20">This element has a margin of 20 pixels on all sides.</div>
Padding Classes
.p-{number}
.p-{number}
Applies padding to all sides of the element.
CSS equivalent: padding: {number}px;
Example usage:
<div class="p-10">This element has a padding of 10 pixels on all sides.</div>
.pt-{number}
.pt-{number}
Applies padding to the top side of the element.
CSS equivalent: padding-top: {number}px;
Example usage:
<div class="pt-5">This element has a top padding of 5 pixels.</div>
.pb-{number}
.pb-{number}
Applies padding to the bottom side of the element.
CSS equivalent: padding-bottom: {number}px;
Example usage:
<div class="pb-8">This element has a bottom padding of 8 pixels.</div>
.pl-{number}
.pl-{number}
Applies padding to the left side of the element.
CSS equivalent: padding-left: {number}px;
Example usage:
<div class="pl-12">This element has a left padding of 12 pixels.</div>
.pr-{number}
.pr-{number}
Applies padding to the right side of the element.
CSS equivalent: padding-right: {number}px;
Example usage:
<div class="pr-15">This element has a right padding of 15 pixels.</div>
.px-{number}
.px-{number}
Applies padding to both the left and right sides of the element.
CSS equivalent: `padding-left:
{number}px; padding-right: {number}px;`
Example usage:
<div class="px-20">This element has a left and right padding of 20 pixels.</div>
.py-{number}
.py-{number}
Applies padding to both the top and bottom sides of the element.
CSS equivalent: padding-top: {number}px; padding-bottom: {number}px;
Example usage:
<div class="py-25">This element has a top and bottom padding of 25 pixels.</div>
Last updated