Paddings
This page lists all Paddings CSS custom properties available in the OxyProps Framework
No Padding
link No PaddingValue | Utility Class |
---|---|
0: cancels a padding | o-nopad |
Fluid Paddings
link Fluid PaddingsValue | CSS Variable | Utility Class |
---|---|---|
clamp(.5rem, 1vw, 1rem) | --o-size-fluid-1 | o-pad-1 |
clamp(1rem, 2vw, 1.5rem) | --o-size-fluid-2 | o-pad-2 |
clamp(1.5rem, 3vw, 2rem) | --o-size-fluid-3 | o-pad-3 |
clamp(2rem, 4vw, 3rem) | --o-size-fluid-4 | o-pad-4 |
clamp(4rem, 5vw, 5rem) | --o-size-fluid-5 | o-pad-5 |
clamp(5rem, 7vw, 7.5rem) | --o-size-fluid-6 | o-pad-6 |
clamp(7.5rem, 10vw, 10rem) | --o-size-fluid-7 | o-pad-7 |
clamp(10rem, 20vw, 15rem) | --o-size-fluid-8 | o-pad-8 |
clamp(15rem, 30vw, 20rem) | --o-size-fluid-9 | o-pad-9 |
clamp(20rem, 40vw, 30rem) | --o-size-fluid-10 | o-pad-10 |
Fluid Paddings (Block and Inline)
link Fluid Paddings (Block and Inline)Value | Padding Block | Padding Inline |
---|---|---|
clamp(.5rem, 1vw, 1rem) | o-pad-bl-1 | o-pad-in-1 |
clamp(1rem, 2vw, 1.5rem) | o-pad-bl-2 | o-pad-in-2 |
clamp(1.5rem, 3vw, 2rem) | o-pad-bl-3 | o-pad-in-3 |
clamp(2rem, 4vw, 3rem) | o-pad-bl-4 | o-pad-in-4 |
clamp(4rem, 5vw, 5rem) | o-pad-bl-5 | o-pad-in-5 |
clamp(5rem, 7vw, 7.5rem) | o-pad-bl-6 | o-pad-in-6 |
clamp(7.5rem, 10vw, 10rem) | o-pad-bl-7 | o-pad-in-7 |
clamp(10rem, 20vw, 15rem) | o-pad-bl-8 | o-pad-in-8 |
clamp(15rem, 30vw, 20rem) | o-pad-bl-9 | o-pad-in-9 |
clamp(20rem, 40vw, 30rem) | o-pad-bl-10 | o-pad-in-10 |
Fluid Paddings (Top, Right, Bottom, Left)
link Fluid Paddings (Top, Right, Bottom, Left)I use the terms Top, Right, Bottom, Left to describe the padding directions. This is for being easily understood by everyone. However, the actual CSS properties are padding-block-start
, padding-inline-end
, padding-block-end
, padding-inline-start
. The start
and end
are relative to the writing mode. For example, if the writing mode is ltr
, the start
is left
and the end
is right
. If the writing mode is rtl
, the start
is right
and the end
is left
.
Value | Padding Top | Padding Right | Padding Bottom | Padding Left |
---|---|---|---|---|
clamp(.5rem, 1vw, 1rem) | o-pad-t-1 | o-pad-r-1 | o-pad-b-1 | o-pad-l-1 |
clamp(1rem, 2vw, 1.5rem) | o-pad-t-2 | o-pad-r-2 | o-pad-b-2 | o-pad-l-2 |
clamp(1.5rem, 3vw, 2rem) | o-pad-t-3 | o-pad-r-3 | o-pad-b-3 | o-pad-l-3 |
clamp(2rem, 4vw, 3rem) | o-pad-t-4 | o-pad-r-4 | o-pad-b-4 | o-pad-l-4 |
clamp(4rem, 5vw, 5rem) | o-pad-t-5 | o-pad-r-5 | o-pad-b-5 | o-pad-l-5 |
clamp(5rem, 7vw, 7.5rem) | o-pad-t-6 | o-pad-r-6 | o-pad-b-6 | o-pad-l-6 |
clamp(7.5rem, 10vw, 10rem) | o-pad-t-7 | o-pad-r-7 | o-pad-b-7 | o-pad-l-7 |
clamp(10rem, 20vw, 15rem) | o-pad-t-8 | o-pad-r-8 | o-pad-b-8 | o-pad-l-8 |
clamp(15rem, 30vw, 20rem) | o-pad-t-9 | o-pad-r-9 | o-pad-b-9 | o-pad-l-9 |
clamp(20rem, 40vw, 30rem) | o-pad-t-10 | o-pad-r-10 | o-pad-b-10 | o-pad-l-10 |
Fixed Paddings
link Fixed PaddingsValue | CSS Variable | Utility Class |
---|---|---|
-.5rem | --o-size-000 | o-pad-fixed-000 |
-.25rem | --o-size-00 | o-pad-fixed-00 |
.25rem | --o-size-1 | o-pad-fixed-1 |
.5rem | --o-size-2 | o-pad-fixed-2 |
1rem | --o-size-3 | o-pad-fixed-3 |
1.25rem | --o-size-4 | o-pad-fixed-4 |
1.5rem | --o-size-5 | o-pad-fixed-5 |
1.75rem | --o-size-6 | o-pad-fixed-6 |
2rem | --o-size-7 | o-pad-fixed-7 |
3rem | --o-size-8 | o-pad-fixed-8 |
4rem | --o-size-9 | o-pad-fixed-9 |
5rem | --o-size-10 | o-pad-fixed-10 |
7.5rem | --o-size-11 | o-pad-fixed-11 |
10rem | --o-size-12 | o-pad-fixed-12 |
15rem | --o-size-13 | o-pad-fixed-13 |
20rem | --o-size-14 | o-pad-fixed-14 |
30rem | --o-size-15 | o-pad-fixed-15 |
Fixed Paddings (Block and Inline)
link Fixed Paddings (Block and Inline)Value | Padding Block | Padding Inline |
---|---|---|
-.5rem | o-pad-bl-fixed-000 | o-pad-in-fixed-000 |
-.25rem | o-pad-bl-fixed-00 | o-pad-in-fixed-00 |
.25rem | o-pad-bl-fixed-1 | o-pad-in-fixed-1 |
.5rem | o-pad-bl-fixed-2 | o-pad-in-fixed-2 |
1rem | o-pad-bl-fixed-3 | o-pad-in-fixed-3 |
1.25rem | o-pad-bl-fixed-4 | o-pad-in-fixed-4 |
1.5rem | o-pad-bl-fixed-5 | o-pad-in-fixed-5 |
1.75rem | o-pad-bl-fixed-6 | o-pad-in-fixed-6 |
2rem | o-pad-bl-fixed-7 | o-pad-in-fixed-7 |
3rem | o-pad-bl-fixed-8 | o-pad-in-fixed-8 |
4rem | o-pad-bl-fixed-9 | o-pad-in-fixed-9 |
5rem | o-pad-bl-fixed-10 | o-pad-in-fixed-10 |
7.5rem | o-pad-bl-fixed-11 | o-pad-in-fixed-11 |
10rem | o-pad-bl-fixed-12 | o-pad-in-fixed-12 |
15rem | o-pad-bl-fixed-13 | o-pad-in-fixed-13 |
20rem | o-pad-bl-fixed-14 | o-pad-in-fixed-14 |
30rem | o-pad-bl-fixed-15 | o-pad-in-fixed-15 |
Fixed Paddings (Top, Right, Bottom, Left)
link Fixed Paddings (Top, Right, Bottom, Left)I use the terms Top, Right, Bottom, Left to describe the padding directions. This is for being easily understood by everyone. However, the actual CSS properties are padding-block-start
, padding-inline-end
, padding-block-end
, padding-inline-start
. The start
and end
are relative to the writing mode. For example, if the writing mode is ltr
, the start
is left
and the end
is right
. If the writing mode is rtl
, the start
is right
and the end
is left
.
Value | Padding Top | Padding Right | Padding Bottom | Padding Left |
---|---|---|---|---|
-.5rem | o-pad-t-fixed-000 | o-pad-r-fixed-000 | o-pad-b-fixed-000 | o-pad-l-fixed-000 |
-.25rem | o-pad-t-fixed-00 | o-pad-r-fixed-00 | o-pad-b-fixed-00 | o-pad-l-fixed-00 |
.25rem | o-pad-t-fixed-1 | o-pad-r-fixed-1 | o-pad-b-fixed-1 | o-pad-l-fixed-1 |
.5rem | o-pad-t-fixed-2 | o-pad-r-fixed-2 | o-pad-b-fixed-2 | o-pad-l-fixed-2 |
1rem | o-pad-t-fixed-3 | o-pad-r-fixed-3 | o-pad-b-fixed-3 | o-pad-l-fixed-3 |
1.25rem | o-pad-t-fixed-4 | o-pad-r-fixed-4 | o-pad-b-fixed-4 | o-pad-l-fixed-4 |
1.5rem | o-pad-t-fixed-5 | o-pad-r-fixed-5 | o-pad-b-fixed-5 | o-pad-l-fixed-5 |
1.75rem | o-pad-t-fixed-6 | o-pad-r-fixed-6 | o-pad-b-fixed-6 | o-pad-l-fixed-6 |
2rem | o-pad-t-fixed-7 | o-pad-r-fixed-7 | o-pad-b-fixed-7 | o-pad-l-fixed-7 |
3rem | o-pad-t-fixed-8 | o-pad-r-fixed-8 | o-pad-b-fixed-8 | o-pad-l-fixed-8 |
4rem | o-pad-t-fixed-9 | o-pad-r-fixed-9 | o-pad-b-fixed-9 | o-pad-l-fixed-9 |
5rem | o-pad-t-fixed-10 | o-pad-r-fixed-10 | o-pad-b-fixed-10 | o-pad-l-fixed-10 |
7.5rem | o-pad-t-fixed-11 | o-pad-r-fixed-11 | o-pad-b-fixed-11 | o-pad-l-fixed-11 |
10rem | o-pad-t-fixed-12 | o-pad-r-fixed-12 | o-pad-b-fixed-12 | o-pad-l-fixed-12 |
15rem | o-pad-t-fixed-13 | o-pad-r-fixed-13 | o-pad-b-fixed-13 | o-pad-l-fixed-13 |
20rem | o-pad-t-fixed-14 | o-pad-r-fixed-14 | o-pad-b-fixed-14 | o-pad-l-fixed-14 |
30rem | o-pad-t-fixed-15 | o-pad-r-fixed-15 | o-pad-b-fixed-15 | o-pad-l-fixed-15 |