Spacing Utilities Margins Preview

Spacing tokens are predefined values used to maintain consistent distances between elements such as margins, padding, and gaps, particularly within auto layout settings. They provide a standardised system for spacing, ensuring uniformity and harmony across different components within a design project.

Margin Utilities

Margin — All sides .m-*

Token
rem
px
Class
Preview
--spacing-0
0rem
0px
.m-0
--spacing-2
0.125rem
2px
.m-2
--spacing-4
0.25rem
4px
.m-4
--spacing-8
0.5rem
8px
.m-8
--spacing-12
0.75rem
12px
.m-12
--spacing-16
1rem
16px
.m-16
--spacing-24
1.5rem
24px
.m-24
--spacing-32
2rem
32px
.m-32
--spacing-40
2.5rem
40px
.m-40
--spacing-48
3rem
48px
.m-48
--spacing-56
3.5rem
56px
.m-56
--spacing-64
4rem
64px
.m-64
>

Margin — Top .mt-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.mt-0
--spacing-2
0.125
2
.mt-2
--spacing-4
0.25
4
.mt-4
--spacing-8
0.5
8
.mt-8
--spacing-12
0.75
12
.mt-12
--spacing-16
1
16
.mt-16
--spacing-24
1.5
24
.mt-24
--spacing-32
2
32
.mt-32
--spacing-40
2.5
40
.mt-40
--spacing-48
3
48
.mt-48
--spacing-56
3.5
56
.mt-56
--spacing-64
4
64
.mt-64
>

Margin — Bottom .mb-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.mb-0
--spacing-2
0.125
2
.mb-2
--spacing-4
0.25
4
.mb-4
--spacing-8
0.5
8
.mb-8
--spacing-12
0.75
12
.mb-12
--spacing-16
1
16
.mb-16
--spacing-24
1.5
24
.mb-24
--spacing-32
2
32
.mb-32
--spacing-40
2.5
40
.mb-40
--spacing-48
3
48
.mb-48
--spacing-56
3.5
56
.mb-56
--spacing-64
4
64
.mb-64
>

Margin — Left .ml-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.ml-0
--spacing-2
0.125
2
.ml-2
--spacing-4
0.25
4
.ml-4
--spacing-8
0.5
8
.ml-8
--spacing-12
0.75
12
.ml-12
--spacing-16
1
16
.ml-16
--spacing-24
1.5
24
.ml-24
--spacing-32
2
32
.ml-32
--spacing-40
2.5
40
.ml-40
--spacing-48
3
48
.ml-48
--spacing-56
3.5
56
.ml-56
--spacing-64
4
64
.ml-64

Margin — Right .mr-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.mr-0
--spacing-2
0.125
2
.mr-2
--spacing-4
0.25
4
.mr-4
--spacing-8
0.5
8
.mr-8
--spacing-12
0.75
12
.mr-12
--spacing-16
1
16
.mr-16
--spacing-24
1.5
24
.mr-24
--spacing-32
2
32
.mr-32
--spacing-40
2.5
40
.mr-40
--spacing-48
3
48
.mr-48
--spacing-56
3.5
56
.mr-56
--spacing-64
4
64
.mr-64
>

Margin — Horizontal .mx-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.mx-0
--spacing-2
0.125
2
.mx-2
--spacing-4
0.25
4
.mx-4
--spacing-8
0.5
8
.mx-8
--spacing-12
0.75
12
.mx-12
--spacing-16
1
16
.mx-16
--spacing-24
1.5
24
.mx-24
--spacing-32
2
32
.mx-32
--spacing-40
2.5
40
.mx-40
--spacing-48
3
48
.mx-48
--spacing-56
3.5
56
.mx-56
--spacing-64
4
64
.mx-64
>

Margin — Vertical .my-*

Token
rem
px
Class
Preview
--spacing-0
0
0
.my-0
--spacing-2
0.125
2
.my-2
--spacing-4
0.25
4
.my-4
--spacing-8
0.5
8
.my-8
--spacing-12
0.75
12
.my-12
--spacing-16
1
16
.my-16
--spacing-24
1.5
24
.my-24
--spacing-32
2
32
.my-32
--spacing-40
2.5
40
.my-40
--spacing-48
3
48
.my-48
--spacing-56
3.5
56
.my-56
--spacing-64
4
64
.my-64
>

Margin — Auto .my-*

Token
rem
px
Class
Preview
--spacing-auto
auto
auto
.m-auto
--spacing-auto
auto
auto
.mx-auto
--spacing-auto
auto
auto
.my-auto
--spacing-auto
auto
auto
.ml-auto
--spacing-auto
auto
auto
.mr-auto
--spacing-auto
auto
auto
.mt-auto
--spacing-auto
auto
auto
.mb-auto