Margin
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
Top
Use .mt{step} to set an element's top margin.
Box with top margin
Right
Use .mr{step} to set an element's right margin.
Box with right margin
Bottom
Use .mb{step} to set an element's bottom margin.
Box with bottom margin
Left
Use .mb{step} to set an element's left margin.
Box with left margin
Responsive
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
Customization
All margin values can be set up in the map $scale: (...) in _settings.scss.
Variants
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.