Skip to content

Spacing

This page lists all Spacing CSS custom properties available in the OxyProps Framework

Fluid Spacing

link Fluid Spacing
ValueCSS VariableHorizontalVertical
clamp(.5rem, 1vw, 1rem) --o-size-fluid-1 o-space-x-1 o-space-y-1
clamp(1rem, 2vw, 1.5rem) --o-size-fluid-2 o-space-x-2 o-space-y-2
clamp(1.5rem, 3vw, 2rem) --o-size-fluid-3 o-space-x-3 o-space-y-3
clamp(2rem, 4vw, 3rem) --o-size-fluid-4 o-space-x-4 o-space-y-4
clamp(4rem, 5vw, 5rem) --o-size-fluid-5 o-space-x-5 o-space-y-5
clamp(5rem, 7vw, 7.5rem) --o-size-fluid-6 o-space-x-6 o-space-y-6
clamp(7.5rem, 10vw, 10rem) --o-size-fluid-7 o-space-x-7 o-space-y-7
clamp(10rem, 20vw, 15rem) --o-size-fluid-8 o-space-x-8 o-space-y-8
clamp(15rem, 30vw, 20rem) --o-size-fluid-9 o-space-x-9 o-space-y-9
clamp(20rem, 40vw, 30rem) --o-size-fluid-10 o-space-x-10 o-space-y-10

Fixed Spacing

link Fixed Spacing
ValueCSS VariableHorizontalVertical
-.5rem --o-size-000 o-space-x-fixed-000 o-space-y-fixed-000
-.25rem --o-size-1 o-space-x-fixed-00 o-space-y-fixed-00
.25rem --o-size-1 o-space-x-fixed-1 o-space-y-fixed-1
.5rem --o-size-2 o-space-x-fixed-2 o-space-y-fixed-2
1rem --o-size-3 o-space-x-fixed-3 o-space-y-fixed-3
1.25rem --o-size-4 o-space-x-fixed-4 o-space-y-fixed-4
1.5rem --o-size-5 o-space-x-fixed-5 o-space-y-fixed-5
1.75rem --o-size-6 o-space-x-fixed-6 o-space-y-fixed-6
2rem --o-size-7 o-space-x-fixed-7 o-space-y-fixed-7
3rem --o-size-8 o-space-x-fixed-8 o-space-y-fixed-8
4rem --o-size-9 o-space-x-fixed-9 o-space-y-fixed-9
5rem --o-size-10 o-space-x-fixed-10 o-space-y-fixed-10
7.5rem --o-size-11 o-space-x-fixed-11 o-space-y-fixed-11
10rem --o-size-12 o-space-x-fixed-12 o-space-y-fixed-12
15rem --o-size-13 o-space-x-fixed-13 o-space-y-fixed-13
20rem --o-size-14 o-space-x-fixed-14 o-space-y-fixed-14
30rem --o-size-15 o-space-x-fixed-15 o-space-y-fixed-15