CSS Margin & Padding modifiers

Description:
Provides a common system for setting paddings and margins between HTML elements.
We have setted 4 sizes for each property, so when we have to add some spacing between elements we can use them.


Usage:
Mark the element with the desired spacing class.

Spacing classnames are an acronym of three properties: type, position an size.

E.g. .pt-m it's the class needed for setting padding top medium ($spacing/2)

Complete acronym reference based on Emmet:

FIRST LETTER
p = padding

SECOND LETTER
a = all
t = top
r = right
b = bottom
l = left
h = horizontal
v = vertical

LAST LETTER
n = none ( 0 )
s = small ( $spacing/4 )
m = medium ( $spacing/2 )
l = large ( $spacing )
xl = extra large ( $spacing*2 )



@if $ui != true {

.pt-n, .pv-n, .pa-n {
padding-top: 0 !important;
}

.pt-s, .pv-s, .pa-s {
padding-top: $spacing/4 !important;
}

.pt-m, .pv-m, .pa-m {
padding-top: $spacing/2 !important;
}

.pt-l, .pv-l, .pa-l {
padding-top: $spacing !important;
}

.pt-xl, .pv-xl, .pa-xl {
padding-top: $spacing*2 !important;
}

.pr-n, .ph-n, .pa-n {
padding-right: 0 !important;
}

.pr-s, .phs, .pa-s {
padding-right: $spacing/4 !important;
}

.pr-m, .ph-m, .pa-m {
padding-right: $spacing/2 !important;
}

.pr-l, .ph-l, .pa-l {
padding-right: $spacing !important;
}

.pr-xl, .ph-xl, .pa-xl {
padding-right: $spacing*2 !important;
}

.pb-n, .pv-n, .pa-n {
padding-bottom: 0 !important;
}

.pb-s, .pv-s, .pa-s {
padding-bottom: $spacing/4 !important;
}

.pb-m, .pv-m, .pa-m {
padding-bottom: $spacing/2 !important;
}

.pb-l, .pv-l, .pa-l {
padding-bottom: $spacing !important;
}

.pb-xl, .pv-xl, .pa-xl {
padding-bottom: $spacing*2 !important;
}

.pl-n, .ph-n, .pa-n {
padding-left: 0 !important;
}

.pl-s, .ph-s, .pa-s {
padding-left: $spacing/4 !important;
}

.pl-m, .ph-m, .pa-m {
padding-left: $spacing/2 !important;
}

.pl-l, .ph-l, .pa-l {
padding-left: $spacing !important;
}

.pl-xl, .ph-xl, .pa-xl {
padding-left: $spacing*2 !important;
}

.mt-n, .mv-n, .ma-n {
margin-top: 0 !important;
}

.mt-s, .mv-s, .ma-s {
margin-top: $spacing/4 !important;
}

.mt-m, .mv-m, .ma-m {
margin-top: $spacing/2 !important;
}

.mt-l, .mv-l, .ma-l {
margin-top: $spacing !important;
}

.mt-xl, .mv-xl, .ma-xl {
margin-top: $spacing*2 !important;
}

.mr-n, .mh-n, .ma-n {
margin-right: 0 !important;
}

.mr-s, .mh-s, .ma-s {
margin-right: $spacing/4 !important;
}

.mr-m, .mh-m, .ma-m {
margin-right: $spacing/2 !important;
}

.mr-l, .mh-l, .ma-l {
margin-right: $spacing !important;
}

.mr-xl, .mh-xl, .ma-xl {
margin-right: $spacing*2 !important;
}

.mb-n, .mv-n, .ma-n {
margin-bottom: 0 !important;
}

.mb-s, .mv-s, .ma-s {
margin-bottom: $spacing/4 !important;
}

.mb-m, .mv-m, .ma-m {
margin-bottom: $spacing/2 !important;
}

.mb-l, .mv-l, .ma-l {
margin-bottom: $spacing !important;
}

.mb-xl, .mv-xl, .ma-xl {
margin-bottom: $spacing*2 !important;
}

.ml-n, .mh-n, .ma-n {
margin-left: 0 !important;
}

.ml-s, .mh-s, .ma-s {
margin-left: $spacing/4 !important;
}

.ml-m, .mh-m, .ma-m {
margin-left: $spacing/2 !important;
}

.ml-l, .mh-l, .ma-l {
margin-left: $spacing !important;
}

.ml-xl, .mh-xl, .ma-xl {
margin-left: $spacing*2 !important;
}
}

Lorem ipsum

Lorem ipsum

Lorem ipsum

<p class="pa-xl box">Lorem ipsum</p>
<p class="pl-m box">Lorem ipsum</p>
<p class="pt-s  box">Lorem ipsum</p>