📪Spacing

Margin Classes

.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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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}

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>