Margin

The margin CSS property sets the margin area on all four sides of an element.

For responsive

add -sm, -md, -lg or -xl to class name, for example:

<div class="m5-md"></div>

.m1 {
    margin: $px8;
}
.m2 {
    margin: $px16;
}
.m3 {
    margin: $px24;
}
.m4 {
    margin: $px32;
}
.m5 {
    margin: $px40;
}
.m6 {
    margin: $px48;
}
.m7 {
    margin: $px56;
}
.m8 {
    margin: $px64;
}
.-m1 {
    margin: -$px8;
}
.-m2 {
    margin: -$px16;
}
.-m3 {
    margin: -$px24;
}
.-m4 {
    margin: -$px32;
}
.-m5 {
    margin: -$px40;
}
.-m6 {
    margin: -$px48;
}
.-m7 {
    margin: -$px56;
}
.-m8 {
    margin: -$px64;
}

.my0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my1 {
    margin-top: $px8;
    margin-bottom: $px8;
}
.my2 {
    margin-top: $px16;
    margin-bottom: $px16;
}
.my3 {
    margin-top: $px24;
    margin-bottom: $px24;
}
.my4 {
    margin-top: $px32;
    margin-bottom: $px32;
}
.my5 {
    margin-top: $px40;
    margin-bottom: $px40;
}
.my6 {
    margin-top: $px48;
    margin-bottom: $px48;
}
.my7 {
    margin-top: $px56;
    margin-bottom: $px56;
}
.my8 {
    margin-top: $px64;
    margin-bottom: $px64;
}

.-my1 {
    margin-top: -$px8;
    margin-bottom: -$px8;
}
.-my2 {
    margin-top: -$px16;
    margin-bottom: -$px16;
}
.-my3 {
    margin-top: -$px24;
    margin-bottom: -$px24;
}
.-my4 {
    margin-top: -$px32;
    margin-bottom: -$px32;
}
.-my5 {
    margin-top: -$px40;
    margin-bottom: -$px40;
}
.-my6 {
    margin-top: -$px48;
    margin-bottom: -$px48;
}
.-my7 {
    margin-top: -$px56;
    margin-bottom: -$px56;
}
.-my8 {
    margin-top: -$px64;
    margin-bottom: -$px64;
}

.mx0 {
    margin-left: 0;
    margin-right: 0;
}
.mx1 {
    margin-left: $px8;
    margin-right: $px8;
}
.mx2 {
    margin-left: $px16;
    margin-right: $px16;
}
.mx3 {
    margin-left: $px24;
    margin-right: $px24;
}
.mx4 {
    margin-left: $px32;
    margin-right: $px32;
}
.mx5 {
    margin-left: $px40;
    margin-right: $px40;
}
.mx6 {
    margin-left: $px48;
    margin-right: $px48;
}
.mx7 {
    margin-left: $px56;
    margin-right: $px56;
}
.mx8 {
    margin-left: $px64;
    margin-right: $px64;
}

.-mx1 {
    margin-left: -$px8;
    margin-right: -$px8;
}
.-mx2 {
    margin-left: -$px16;
    margin-right: -$px16;
}
.-mx3 {
    margin-left: -$px24;
    margin-right: -$px24;
}
.-mx4 {
    margin-left: -$px32;
    margin-right: -$px32;
}
.-mx5 {
    margin-left: -$px40;
    margin-right: -$px40;
}
.-mx6 {
    margin-left: -$px48;
    margin-right: -$px48;
}
.-mx7 {
    margin-left: -$px56;
    margin-right: -$px56;
}
.-mx8 {
    margin-left: -$px64;
    margin-right: -$px64;
}

.mt0 {
    margin-top: 0;
}
.mt1 {
    margin-top: $px8;
}
.mt2 {
    margin-top: $px16;
}
.mt3 {
    margin-top: $px24;
}
.mt4 {
    margin-top: $px32;
}
.mt5 {
    margin-top: $px40;
}
.mt6 {
    margin-top: $px48;
}
.mt7 {
    margin-top: $px56;
}
.mt8 {
    margin-top: $px64;
}
.-mt1 {
    margin-top: -$px8;
}
.-mt2 {
    margin-top: -$px16;
}
.-mt3 {
    margin-top: -$px24;
}
.-mt4 {
    margin-top: -$px32;
}
.-mt5 {
    margin-top: -$px40;
}
.-mt6 {
    margin-top: -$px48;
}
.-mt7 {
    margin-top: -$px56;
}
.-mt8 {
    margin-top: -$px64;
}

.mr0 {
    margin-right: 0;
}
.mr1 {
    margin-right: $px8;
}
.mr2 {
    margin-right: $px16;
}
.mr3 {
    margin-right: $px24;
}
.mr4 {
    margin-right: $px32;
}
.mr5 {
    margin-right: $px40;
}
.mr6 {
    margin-right: $px48;
}
.mr7 {
    margin-right: $px56;
}
.mr8 {
    margin-right: $px64;
}

.-mr1 {
    margin-right: -$px8;
}
.-mr2 {
    margin-right: -$px16;
}
.-mr3 {
    margin-right: -$px24;
}
.-mr4 {
    margin-right: -$px32;
}
.-mr5 {
    margin-right: -$px40;
}
.-mr6 {
    margin-right: -$px48;
}
.-mr7 {
    margin-right: -$px56;
}
.-mr8 {
    margin-right: -$px64;
}

.mb0 {
    margin-bottom: 0;
}
.mb1 {
    margin-bottom: $px8;
}
.mb2 {
    margin-bottom: $px16;
}
.mb3 {
    margin-bottom: $px24;
}
.mb4 {
    margin-bottom: $px32;
}
.mb5 {
    margin-bottom: $px40;
}
.mb6 {
    margin-bottom: $px48;
}
.mb7 {
    margin-bottom: $px56;
}
.mb8 {
    margin-bottom: $px64;
}

.-mb1 {
    margin-bottom: -$px8;
}
.-mb2 {
    margin-bottom: -$px16;
}
.-mb3 {
    margin-bottom: -$px24;
}
.-mb4 {
    margin-bottom: -$px32;
}
.-mb5 {
    margin-bottom: -$px40;
}
.-mb6 {
    margin-bottom: -$px48;
}
.-mb7 {
    margin-bottom: -$px56;
}
.-mb8 {
    margin-bottom: -$px64;
}

.ml0 {
    margin-left: 0;
}
.ml1 {
    margin-left: $px8;
}
.ml2 {
    margin-left: $px16;
}
.ml3 {
    margin-left: $px24;
}
.ml4 {
    margin-left: $px32;
}
.ml5 {
    margin-left: $px40;
}
.ml6 {
    margin-left: $px48;
}
.ml7 {
    margin-left: $px56;
}
.ml8 {
    margin-left: $px64;
}

.-ml1 {
    margin-left: -$px8;
}
.-ml2 {
    margin-left: -$px16;
}
.-ml3 {
    margin-left: -$px24;
}
.-ml4 {
    margin-left: -$px32;
}
.-ml5 {
    margin-left: -$px40;
}
.-ml6 {
    margin-left: -$px48;
}
.-ml7 {
    margin-left: -$px56;
}
.-ml8 {
    margin-left: -$px64;
}

.mxa {
    margin-left: auto;
    margin-right: auto;
}
.mya {
    margin-top: auto;
    margin-bottom: auto;
}
.mla {
    margin-left: auto;
}
.mra {
    margin-right: auto;
}
.ma {
    margin: auto;
}
.m0 {
    margin: 0;
}