---
layout: default
permalink: /spacing
category: utilities
title: Spacing
description: "Margin and padding utility classes to add spacing to the elements."
---
Example:
{% highlight css %}
.no-m {
margin: 0 !important;
}
.no-p {
padding: 0 !important;
}
{% endhighlight %}
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:
{% highlight html %}
..
..
..
..
..
..
..
{% endhighlight %}
Examples of margin:
{% highlight css %}
.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;
}
{% endhighlight %}
Examples of padding:
{% highlight css %}
.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;
}
{% endhighlight %}
To eliminate margins and padding I used one of the following classes with the prefix no-.
{% highlight css %}
.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;
}
{% endhighlight %}