--- layout: default permalink: /spacing category: utilities title: Spacing description: "Margin and padding utility classes to add spacing to the elements." ---

{{ page.title }} Utilities

{{ page.description }}


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

Automatic margins

{% highlight css %} .m-auto { margin: 0 auto !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 %}