Read the Pattern Info for documentation.

Margin Spacers

.u-space-mx adds a margin-left and margin-right.

.u-space-my adds a margin-top and margin-bottom.

.u-space-ml adds a margin-left.

.u-space-ml--small is half the space.

.u-space-ml--medium is one and a half the space.

.u-space-ml--large is double the space.

.u-space-ml--huge is 4x the space.

.u-space-ml--vast is 8x the space.

.u-space-ml--flush - override to make flush.

Padding Spacers

.u-space-px adds a padding-left and padding-right.

.u-space-py adds a padding-top and padding-bottom.

.u-space-pl adds a padding-left.

.u-space-pl--small is half the space.

.u-space-pl--medium is one and a half the space.

.u-space-pl--large is double the space.

.u-space-pl--huge is 4x the space.

.u-space-pl--vast is 8x the space.

.u-space-pl--flush - override to make flush.

Remove default vertical margin collapsing

.u-space--no-margin-collapse Margins no longer collapse.

Be aware that this can cause problems due to changing the display type.