Utilities for controlling an element's margin.

Class Properties
.ma0 margin: 0;
.ma1 margin: 0.25rem;
.ma2 margin: 0.5rem;
.ma3 margin: 0.75rem;
.ma4 margin: 1rem;
.ma5 margin: 1.25rem;
.ma6 margin: 1.5rem;
.ma8 margin: 2rem;
.ma10 margin: 2.5rem;
.ma12 margin: 3rem;
.ma16 margin: 4rem;
.ma20 margin: 5rem;
.ma24 margin: 6rem;
.ma32 margin: 8rem;
.ma40 margin: 10rem;
.ma48 margin: 12rem;
.ma64 margin: 16rem;
.ma80 margin: 20rem;
.ma96 margin: 24rem;
.ma128 margin: 32rem;
.ma160 margin: 40rem;
.ma192 margin: 48rem;
.ma256 margin: 64rem;
.ma320 margin: 80rem;
.ma384 margin: 96rem;
.ma512 margin: 128rem;
.ma640 margin: 160rem;
.ma768 margin: 192rem;
.mx0 margin-left: 0; margin-right: 0;
.mx1 margin-left: 0.25rem; margin-right: 0.25rem;
.mx2 margin-left: 0.5rem; margin-right: 0.5rem;
.mx3 margin-left: 0.75rem; margin-right: 0.75rem;
.mx4 margin-left: 1rem; margin-right: 1rem;
.mx5 margin-left: 1.25rem; margin-right: 1.25rem;
.mx6 margin-left: 1.5rem; margin-right: 1.5rem;
.mx8 margin-left: 2rem; margin-right: 2rem;
.mx10 margin-left: 2.5rem; margin-right: 2.5rem;
.mx12 margin-left: 3rem; margin-right: 3rem;
.mx16 margin-left: 4rem; margin-right: 4rem;
.mx20 margin-left: 5rem; margin-right: 5rem;
.mx24 margin-left: 6rem; margin-right: 6rem;
.mx32 margin-left: 8rem; margin-right: 8rem;
.mx40 margin-left: 10rem; margin-right: 10rem;
.mx48 margin-left: 12rem; margin-right: 12rem;
.mx64 margin-left: 16rem; margin-right: 16rem;
.mx80 margin-left: 20rem; margin-right: 20rem;
.mx96 margin-left: 24rem; margin-right: 24rem;
.mx128 margin-left: 32rem; margin-right: 32rem;
.mx160 margin-left: 40rem; margin-right: 40rem;
.mx192 margin-left: 48rem; margin-right: 48rem;
.mx256 margin-left: 64rem; margin-right: 64rem;
.mx320 margin-left: 80rem; margin-right: 80rem;
.mx384 margin-left: 96rem; margin-right: 96rem;
.mx512 margin-left: 128rem; margin-right: 128rem;
.mx640 margin-left: 160rem; margin-right: 160rem;
.mx768 margin-left: 192rem; margin-right: 192rem;
.my0 margin-top: 0; margin-bottom: 0;
.my1 margin-top: 0.25rem; margin-bottom: 0.25rem;
.my2 margin-top: 0.5rem; margin-bottom: 0.5rem;
.my3 margin-top: 0.75rem; margin-bottom: 0.75rem;
.my4 margin-top: 1rem; margin-bottom: 1rem;
.my5 margin-top: 1.25rem; margin-bottom: 1.25rem;
.my6 margin-top: 1.5rem; margin-bottom: 1.5rem;
.my8 margin-top: 2rem; margin-bottom: 2rem;
.my10 margin-top: 2.5rem; margin-bottom: 2.5rem;
.my12 margin-top: 3rem; margin-bottom: 3rem;
.my16 margin-top: 4rem; margin-bottom: 4rem;
.my20 margin-top: 5rem; margin-bottom: 5rem;
.my24 margin-top: 6rem; margin-bottom: 6rem;
.my32 margin-top: 8rem; margin-bottom: 8rem;
.my40 margin-top: 10rem; margin-bottom: 10rem;
.my48 margin-top: 12rem; margin-bottom: 12rem;
.my64 margin-top: 16rem; margin-bottom: 16rem;
.my80 margin-top: 20rem; margin-bottom: 20rem;
.my96 margin-top: 24rem; margin-bottom: 24rem;
.my128 margin-top: 32rem; margin-bottom: 32rem;
.my160 margin-top: 40rem; margin-bottom: 40rem;
.my192 margin-top: 48rem; margin-bottom: 48rem;
.my256 margin-top: 64rem; margin-bottom: 64rem;
.my320 margin-top: 80rem; margin-bottom: 80rem;
.my384 margin-top: 96rem; margin-bottom: 96rem;
.my512 margin-top: 128rem; margin-bottom: 128rem;
.my640 margin-top: 160rem; margin-bottom: 160rem;
.my768 margin-top: 192rem; margin-bottom: 192rem;
.mt0 margin-top: 0;
.mt1 margin-top: 0.25rem;
.mt2 margin-top: 0.5rem;
.mt3 margin-top: 0.75rem;
.mt4 margin-top: 1rem;
.mt5 margin-top: 1.25rem;
.mt6 margin-top: 1.5rem;
.mt8 margin-top: 2rem;
.mt10 margin-top: 2.5rem;
.mt12 margin-top: 3rem;
.mt16 margin-top: 4rem;
.mt20 margin-top: 5rem;
.mt24 margin-top: 6rem;
.mt32 margin-top: 8rem;
.mt40 margin-top: 10rem;
.mt48 margin-top: 12rem;
.mt64 margin-top: 16rem;
.mt80 margin-top: 20rem;
.mt96 margin-top: 24rem;
.mt128 margin-top: 32rem;
.mt160 margin-top: 40rem;
.mt192 margin-top: 48rem;
.mt256 margin-top: 64rem;
.mt320 margin-top: 80rem;
.mt384 margin-top: 96rem;
.mt512 margin-top: 128rem;
.mt640 margin-top: 160rem;
.mt768 margin-top: 192rem;
.mr0 margin-right: 0;
.mr1 margin-right: 0.25rem;
.mr2 margin-right: 0.5rem;
.mr3 margin-right: 0.75rem;
.mr4 margin-right: 1rem;
.mr5 margin-right: 1.25rem;
.mr6 margin-right: 1.5rem;
.mr8 margin-right: 2rem;
.mr10 margin-right: 2.5rem;
.mr12 margin-right: 3rem;
.mr16 margin-right: 4rem;
.mr20 margin-right: 5rem;
.mr24 margin-right: 6rem;
.mr32 margin-right: 8rem;
.mr40 margin-right: 10rem;
.mr48 margin-right: 12rem;
.mr64 margin-right: 16rem;
.mr80 margin-right: 20rem;
.mr96 margin-right: 24rem;
.mr128 margin-right: 32rem;
.mr160 margin-right: 40rem;
.mr192 margin-right: 48rem;
.mr256 margin-right: 64rem;
.mr320 margin-right: 80rem;
.mr384 margin-right: 96rem;
.mr512 margin-right: 128rem;
.mr640 margin-right: 160rem;
.mr768 margin-right: 192rem;
.mb0 margin-bottom: 0;
.mb1 margin-bottom: 0.25rem;
.mb2 margin-bottom: 0.5rem;
.mb3 margin-bottom: 0.75rem;
.mb4 margin-bottom: 1rem;
.mb5 margin-bottom: 1.25rem;
.mb6 margin-bottom: 1.5rem;
.mb8 margin-bottom: 2rem;
.mb10 margin-bottom: 2.5rem;
.mb12 margin-bottom: 3rem;
.mb16 margin-bottom: 4rem;
.mb20 margin-bottom: 5rem;
.mb24 margin-bottom: 6rem;
.mb32 margin-bottom: 8rem;
.mb40 margin-bottom: 10rem;
.mb48 margin-bottom: 12rem;
.mb64 margin-bottom: 16rem;
.mb80 margin-bottom: 20rem;
.mb96 margin-bottom: 24rem;
.mb128 margin-bottom: 32rem;
.mb160 margin-bottom: 40rem;
.mb192 margin-bottom: 48rem;
.mb256 margin-bottom: 64rem;
.mb320 margin-bottom: 80rem;
.mb384 margin-bottom: 96rem;
.mb512 margin-bottom: 128rem;
.mb640 margin-bottom: 160rem;
.mb768 margin-bottom: 192rem;
.ml0 margin-left: 0;
.ml1 margin-left: 0.25rem;
.ml2 margin-left: 0.5rem;
.ml3 margin-left: 0.75rem;
.ml4 margin-left: 1rem;
.ml5 margin-left: 1.25rem;
.ml6 margin-left: 1.5rem;
.ml8 margin-left: 2rem;
.ml10 margin-left: 2.5rem;
.ml12 margin-left: 3rem;
.ml16 margin-left: 4rem;
.ml20 margin-left: 5rem;
.ml24 margin-left: 6rem;
.ml32 margin-left: 8rem;
.ml40 margin-left: 10rem;
.ml48 margin-left: 12rem;
.ml64 margin-left: 16rem;
.ml80 margin-left: 20rem;
.ml96 margin-left: 24rem;
.ml128 margin-left: 32rem;
.ml160 margin-left: 40rem;
.ml192 margin-left: 48rem;
.ml256 margin-left: 64rem;
.ml320 margin-left: 80rem;
.ml384 margin-left: 96rem;
.ml512 margin-left: 128rem;
.ml640 margin-left: 160rem;
.ml768 margin-left: 192rem;

Margin in all directions

Use .ma{step} to set an element's margin.

Box with margin in all directions

Horizontal margin

Use .mx{step} to set margin on the x-axis.

Box with horizontal margin

Vertical margin

Use .my{step} to set margin on the y-axis.

Box with vertical margin


Use .mt{step} to set an element's top margin.

Box with top margin


Use .mr{step} to set an element's right margin.

Box with right margin


Use .mb{step} to set an element's bottom margin.

Box with bottom margin


Use .mb{step} to set an element's left margin.

Box with left margin


To control the margin of an element at a specific breakpoint, add @{breakpoint} at the end to the utility class.

Resize browser window to see the effect

Box with different margins


All margin values can be set up in the map $scale: (...) in _settings.scss.


By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.