Spacing Utilities

Margin and padding utility classes to add spacing to the elements.

Example:

.no-m {
  margin: 0 !important;
}

.no-p {
  padding: 0 !important;
}

How it works

m for the properties margin

p for the properties padding

Sides:

l for classes margin-left or padding-left

r for classes margin-right or padding-right

t for classes margin-top or padding-top

b for classes margin-bottom or padding-bottom

x for classes x-left and x-right

y for classes x-top and x-bottom

Sizes:

The functional sizes, the smaller number is the greater spacing.

1 it will be equal to 3rem

2 it will be equal to 2rem

3 it will be equal to 1rem

Use:

<div class="e-container m-3">..</div>
<div class="e-container mt-2">..</div>
<div class="e-container mb-3">..</div>

<div class="e-container m-auto">..</div>

<div class="e-container p-2">..</div>
<div class="e-container px-2">..</div>
<div class="e-container py-1">..</div>

Examples of margin:

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-2 {
  margin: 2rem !important;
}

.mt-2,
.my-2 {
  margin-top: 2rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 2rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 2rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 2rem !important;
}

.m-1 {
  margin: 3rem !important;
}

.mt-1,
.my-1 {
  margin-top: 3rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 3rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 3rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 3rem !important;
}

Examples of padding:

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-2 {
  padding: 2rem !important;
}

.pt-2,
.py-2 {
  padding-top: 2rem !important;
}

.pr-2,
.px-2 {
  padding-right: 2rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 2rem !important;
}

.pl-2,
.px-2 {
  padding-left: 2rem !important;
}

.p-1 {
  padding: 3rem !important;
}

.pt-1,
.py-1 {
  padding-top: 3rem !important;
}

.pr-1,
.px-1 {
  padding-right: 3rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 3rem !important;
}

.pl-1,
.px-1 {
  padding-left: 3rem !important;
}

Automatic margins

.m-auto {
  margin: 0 auto !important;
}

To eliminate margins and padding I used one of the following classes with the prefix no-.

.no-m {
  margin: 0 !important;
}

.no-mt,
.no-my {
  margin-top: 0 !important;
}

.no-mr,
.no-mx {
  margin-right: 0 !important;
}

.no-mb,
.no-my {
  margin-bottom: 0 !important;
}

.no-ml,
.no-mx {
  margin-left: 0 !important;
}

.no-p {
  padding: 0 !important;
}

.no-pt,
.no-py {
  padding-top: 0 !important;
}

.no-pr,
.no-px {
  padding-right: 0 !important;
}

.no-pb,
.no-py {
  padding-bottom: 0 !important;
}

.no-pl,
.no-px {
  padding-left: 0 !important;
}

Spacing Utilities

Example:

How it works

Use:

Examples of margin:

Examples of padding:

Contribute on GitHub

Become a sponsor.

One-time donation

Serious sponsor