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 .mud-m-*

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

Margin — Top .mt-*

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

Margin — Bottom .mb-*

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

Margin — Left .ml-*

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

Margin — Right .mr-*

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

Margin — Horizontal .mx-*

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

Margin — Vertical .my-*

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

Margin — Auto .mud-m-auto

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