Paddings
Ce contenu n’est pas encore disponible dans votre langue.
This page lists all Paddings CSS custom properties available in the OxyProps Framework
No Padding
link No Padding| Value | Utility Class |
|---|---|
| 0: cancels a padding | o-nopad |
Fluid Paddings
link Fluid Paddings| Value | 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 Paddings| Value | 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 |