Margin and padding

Utility spacing scale

Spacer suffix	REM	PX	Token
-0	0	0	0
-1	0.125rem	2px	—units-25
-2	0.25rem	4px	—units-50
-3	0.375rem	6px	—units-75
-4	0.5rem	8px	—units-100
-5	0.75rem	12px	—units-150
-6	1rem	16px	—units-200
-7	1.25rem	20px	—units-250
-8	1.5rem	24px	—units-300
-9	2rem	32px	—units-400
-10	2.5rem	40px	—units-500

:::info Spacing scale Our spacing system is built around a base unit of 8 pixels :::

Margin

Spacing utility classes can be used to effect four directions — top (block-start), right (inline-end), bottom (block-end), left (inline-start). In addition, you can effect just left/right (inline) top/bottom (block). Finally, you can effect all directions at once by no specifying a direction or an axis.

Margin prefixes

Margin prefix	Dimension	Copy
m-	all dimensions (x and y)	m-Copy to Clipboard
mt-	top	mt-Copy to Clipboard
mr-	right	mr-Copy to Clipboard
mb-	bottom	mb-Copy to Clipboard
ml-	left	ml-Copy to Clipboard
mx-	x-dimension (left and right/inline)	mx-Copy to Clipboard
my-	y-dimension (top and bottom/block)	my-Copy to Clipboard

Padding

Padding is exactly the same as margin, simply swapping the “m” in the prefix with a “p”.

Padding prefix	Dimension	Copy
p-	all dimensions (x and y)	p-Copy to Clipboard
pt-	top	pt-Copy to Clipboard
pr-	right	pr-Copy to Clipboard
pb-	bottom	pb-Copy to Clipboard
pl-	left	pl-Copy to Clipboard
px-	x-dimension (left and right/inline)	px-Copy to Clipboard
py-	y-dimension (top and bottom/block)	py-Copy to Clipboard

Breakpoint infixes

Add the viewport sizing infixes (sm, md, lg, xl, xxl) to apply at breakpoints. These infixes apply to both padding and margin.

.{prefix}-{infix}-{suffix}

	XS	Small	Medium	Large	XL	XXL	Copy
.mt-6	has top margin	has top margin	has top margin	has top margin	has top margin	has top margin	class="mt-6"Copy to Clipboard
.mt-sm-6	no top margin	has top margin	has top margin	has top margin	has top margin	has top margin	class="mt-sm-6"Copy to Clipboard
.mt-md-6	no top margin	no top margin	has top margin	has top margin	has top margin	has top margin	class="mt-md-6"Copy to Clipboard
.mt-lg-6	no top margin	no top margin	no top margin	has top margin	has top margin	has top margin	class="mt-lg-6"Copy to Clipboard
.mt-xl-6	no top margin	no top margin	no top margin	no top margin	has top margin	has top margin	class="mt-xl-6"Copy to Clipboard
.mt-xxl-6	no top margin	no top margin	no top margin	no top margin	no top margin	has top margin	class="mt-xxl-6"Copy to Clipboard

Responsiveness

Below is an illustration of the responsive cascade. The pattern follows the “mobile first” model.

	XS	Small	Medium	Large	XL	XXL	Copy
m-2	—units-50	—units-50	—units-50	—units-50	—units-50	—units-50
m-2 m-sm-4	—units-50	—units-100	—units-100	—units-100	—units-100	—units-100
m-2 m-sm-4 m-md-6	—units-50	—units-100	—units-200	—units-200	—units-200	—units-200
m-2 m-sm-4 m-md-6 m-lg-8	—units-50	—units-100	—units-200	—units-300	—units-300	—units-300
m-2 m-sm-4 m-md-6 m-lg-8 m-xl-9	—units-50	—units-100	—units-200	—units-300	—units-400	—units-400
m-2 m-sm-4 m-md-6 m-lg-8 m-xxl-10	—units-50	—units-100	—units-200	—units-300	—units-400	—units-500