Spacing utilities — paddings 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.

Padding utilities

Padding — All sides .p-*

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

Padding — Top .pt-*

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

Padding — Bottom .pb-*

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

Padding — Left .pl-*

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

Padding — Right .pr-*

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

Padding — Horizontal .px-*

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

Padding — Vertical .py-*

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