Block space utilities

Utility classes to manage padding and margins easier

Classes

.align-center

Try center a block within another element.

.m-x{num}

Have a margin evenly around an element that is {num} times the base $1unit.

.m{x}-x{num}

Have a margin for an element where {x} is the direction and is {num} times the base $1unit. Here is a table with examples when the num is 1:

.m-auto

Have a margin around an element that is set to auto.

.m{x}-auto

Have a margin for an element that is set to auto where {x} is the direction. Here is a table with all of the options:

.no-m

Disable margin for an element (i.e: set to 0 and mark !important).

.no-c-m

Disable margin for children of an element (i.e: set to 0 and mark !important).

.no-m{x}

Disable margin for an element where {x} is the direction (i.e: set to 0 and mark !important). Here is a table with all of the options:

.no-c-m{x}

Disable margin for children of an element where {x} is the direction (i.e: set to 0 and mark !important). Here is a table with all of the options:

.p-x{num}

Have an even padding in the element that is {num} times the base $1unit.

.p{x}-x{num}

Have padding for an element where {x} is the direction and is {num} times the base $1unit. Here is a table with examples when the num is 1:

.no-p

Disable padding for an element (i.e: set to 0 and mark !important).

.no-c-p

Disable padding for children of an element (i.e: set to 0 and mark !important).

.no-p{x}

Disable padding for an element where {x} is the direction (i.e: set to 0 and mark !important). Here is a table with all of the options:

.no-c-p{x}

Disable padding for children of an element where {x} is the direction (i.e: set to 0 and mark !important). Here is a table with all of the options: