Margins
Use the margin utility to change an element's margin. The [MULTIPLE] is a number 0-7.
sba-
u-
margin--[MULTIPLE]
Namespace
Prefix
BEM syntax
sba-
u-
margin-[x|y|bottom|left|right|top]--[MULTIPLE]
Namespace
Prefix
BEM syntax
sba-u-margin--0
sba-u-margin--1
sba-u-margin--2
sba-u-margin--3
sba-u-margin--4
sba-u-margin--5
sba-u-margin--6
sba-u-margin--7
Negative margins
Negative margins can be applied as well. This is useful when using nest grid layouts while columns have borders.
sba-
u-
margin--neg[MULTIPLE]
Namespace
Prefix
BEM syntax
sba-
u-
margin-[x|y|bottom|left|right|top]--neg[MULTIPLE]
Namespace
Prefix
BEM syntax
Responsive margins
The margin utility also supports breakpoint prefixes.
sba-
u-
lg-
margin--[MULTIPLE]
Namespace
Prefix
Breakpoint
BEM syntax