{spacing}-{location}-{increment}
//Spacing: Padding(P) and margin(M) is available.
//Location:This where the space will be applied. Top(T), right(R), bottom(B), left(L), all sides(A),
left and right(X), top and bottom(Y).
//Increments of spacing 1-3
.p-t-1: padding-top: 8px;
.p-t-2: padding-top: 16px;
.p-t-3: padding-top: 24px;
//Example of type of spacing classes available for padding and margin
.p-t-1: padding-top: 8px;
.p-r-1: padding-right: 8px;
.p-b-1: padding-bottom:8px;
.p-l-1: padding-left: 8px;
.p-x-1: padding-left: 8px; padding-right: 8px;
.p-y-1: padding-top: 8px; padding-bottom: 8px;
.p-a-1: padding: 8px; // This will apply to all sides
//For margin simply replace the p with m from from p-t-1 e.g.
//Within HTML call the class
<div class = "p-a-2"></div> //Padding on all sides 16px