Margin and Padding Utilities
A series of utility classes for achieving consistent spacing.
These classes, applied in html, are preferred to controlling margins on elements via CSS. Project-wide CSS is typically littered with lots of rulesets that only declare margins on an element. These utilities help reduce overall css sizes, help eliminate magic numbers, and help create in-page and page-to-page visual harmony.
The classnames use the following shorthand:
m = margin
p = padding
t = top
r = right
b = bottom
l = left
x = x-axis
y = y-axis
n = negative (margin only)
0 = zero
1 = applies global css variable '--space-1'
2 = applies global css variable '--space-2'
3 = applies global css variable '--space-3'
4 = applies global css variable '--space-4'
5 = applies global css variable '--space-5'
6 = applies global css variable '--space-6'
7 = applies global css variable '--space-7'
8 = applies global css variable '--space-8'
9 = applies global css variable '--space-9'
-auto = (mr, ml, and mx only)Example usage
mb3 = margin-bottom: var(--space-3)mx2 = margin-left: var(--space-2), margin-right: var(--space-2)mx2 = margin-left: var(--space-2), margin-right: var(--space-2)Media Queries
Use breakpoint prefixes to achieve different spacing at our standard breakpoints.
sm- = (width >= 480px)
md- = (width >= 768px)
lg- = (width >= 1024px)
xl- = (width >= 1280px)
xxl- = (width >= 1600px)
className='mb0 sm-mb1 lg-mb2 xxl-mb3'Visual examples are below for common usage; there are a number of other combinations possible.
Margin - All sides
m0
m0
m1
m1
m2
m2
m3
m3
m4
m4
m5
m5
m6
m6
m7
m7
m8
m8
m9
m9
Margin - Bottom
mb0
mb0
mb1
mb1
mb2
mb2
mb3
mb3
mb4
mb4
mb5
mb5
mb6
mb6
mb7
mb7
mb8
mb8
mb9
mb9
Margin - Y Axis
my0
my0
my1
my1
my2
my2
my3
my3
my4
my4
my5
my5
my6
my6
my7
my7
my8
my8
my9
my9
Margin - X Axis
mx0
mx0
mx1
mx1
mx2
mx2
mx3
mx3
mx4
mx4
mx5
mx5
mx6
mx6
mx7
mx7
mx8
mx8
mx9
mx9