Utilities for controlling element margin and padding.

Spacing

Size Value
0 0px
px 1px
0.5 0.125rem - 2px
1 0.25rem - 4px
2 0.5rem - 8px
3 0.75rem - 12px
4 1rem - 16px
5 1.25rem - 20px
6 1.5rem - 24x
7 1.5rem - 28x
8 2rem - 32px
9 2.25rem - 36px
10 2.5rem - 40px
12 3rem - 48px
14 3.5rem - 56px
16 4rem - 64px
20 5rem - 80px
24 6rem - 96px
28 7rem - 112px
32 8rem - 128px
36 9rem - 144px
40 10rem - 160px
44 11rem - 176px
48 12rem - 192px
52 13rem - 208px
56 14rem - 224px
60 15rem - 240px
64 16rem - 256px
1/2 50%

Padding

Use p-{t|r|b|l}-{size} to apply padding to an element.

p-2
p-4
pt-4
pr-4
pb-4
pl-4
<div class="d-flex">
	<div class="box p-4">p-2</div>
	<div class="box pt-4">pt-4</div>
	<div class="box pr-4">pr-4</div>
	<div class="box pb-4">pb-4</div>
	<div class="box pl-4">pl-4</div>
</div>

Horizontal and Vertical sides

Use .p-{x|y}-{size} to apply padding on horizontal or vertical side.

px-4
py-4
<div class="d-flex">
	<div class="box px-4">px-4</div>
	<div class="box py-4">py-4</div>
</div>

Margin

Use m-{t|r|b|l}-{size} to apply margin to an element.

Size Value
auto margin:auto
m-4
mt-4
mr-4
mb-4
ml-4
<div class="d-flex">
	<div class="box m-4">m-2</div>
	<div class="box mt-4">mt-4</div>
	<div class="box mr-4">mr-4</div>
	<div class="box mb-4">mb-4</div>
	<div class="box ml-4">ml-4</div>
</div>

Horizontal and Vertical sides

Use m-{x|y}-{size} to apply margin on horizontal or vertical side.

mx-auto
mx-6
<div class="d-flex">
	<div class="box mx-auto">mx-auto</div>
	<div class="box mx-6">mx-6</div>
</div>

Negative Margin

Use -m-{t|r|b|l|x|y}-{size} to apply negative margin.

ml-8
<div class="d-flex">
	<div class="box -ml-8">-ml-8</div>
</div>

Gap

Use gap-{size} to control gutter between flexbox and grid.

gap-4
gap-4
gap-4
gap-4
<div class="d-flex gap-4">
	<div class="box">gap-4</div>
	<div class="box">gap-4</div>
	<div class="box">gap-4</div>
	<div class="box">gap-4</div>
</div>

Row and Column gap

Use gap-{x|y}-{size} to set grid row and column gap.

1
2
3
4
<div class="d-grid grid-cols-2 gap-x-4 gap-y-8">
	<div class="box">1</div>
	<div class="box">2</div>
	<div class="box">3</div>
	<div class="box">4</div>
</div>

Resposive Spacing Utilities

Use {p|m}-{t|r|b|l|x|y}-{breakpoint}-{property} for responsive variants of padding and margin like m-md-4, px-md-4.
Use gap-{x|y}-{breakpoint}-{property} for responsive variants of gap like gap-md-4, gap-x-md-4.

p-sm-4
<div class="d-flex">
	<div class="p-8 p-sm-4 box mx-auto">p-sm-4</div>
</div>

SASS

Extending Spacing Scale

You can add your own spacing scale values by extending $spacing map in your own scss.

// src/scss/utilities/_spacing.scss.scss

$spacing: (
	"px": 1px,
	"0": 0,
	"0\\.5": 0.125rem,
	"1": 0.25rem,
	"2": 0.5rem,
	"3": 0.75rem,
	"4": 1rem,
	"5": 1.25rem,
	"6": 1.5rem,
	"7": 1.75rem,
	"8": 2rem,
	"9": 2.25rem,
	"10": 2.5rem,
	"12": 3rem,
	"16": 4rem,
	"20": 5rem,
	"24": 6rem,
	"28": 7rem,
	"32": 8rem,
	"36": 9rem,
	"40": 10rem,
	"44": 11rem,
	"48": 12rem,
	"52": 13rem,
	"56": 14rem,
	"60": 15rem,
	"64": 16rem,
	"1\\/2": 50%,
);