Margins

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

No Margin

link No Margin

Value	Utility Class
0: cancels a margin	o-nomrg

Fluid Margins

link Fluid Margins

Value	CSS Variable	Utility Class
clamp(.5rem, 1vw, 1rem)	--o-size-fluid-1	o-mrg-1
clamp(1rem, 2vw, 1.5rem)	--o-size-fluid-2	o-mrg-2
clamp(1.5rem, 3vw, 2rem)	--o-size-fluid-3	o-mrg-3
clamp(2rem, 4vw, 3rem)	--o-size-fluid-4	o-mrg-4
clamp(4rem, 5vw, 5rem)	--o-size-fluid-5	o-mrg-5
clamp(5rem, 7vw, 7.5rem)	--o-size-fluid-6	o-mrg-6
clamp(7.5rem, 10vw, 10rem)	--o-size-fluid-7	o-mrg-7
clamp(10rem, 20vw, 15rem)	--o-size-fluid-8	o-mrg-8
clamp(15rem, 30vw, 20rem)	--o-size-fluid-9	o-mrg-9
clamp(20rem, 40vw, 30rem)	--o-size-fluid-10	o-mrg-10

Fluid Margins (Block and Inline)

link Fluid Margins (Block and Inline)

Value	Margin Block	Margin Inline
clamp(.5rem, 1vw, 1rem)	o-mrg-bl-1	o-mrg-in-1
clamp(1rem, 2vw, 1.5rem)	o-mrg-bl-2	o-mrg-in-2
clamp(1.5rem, 3vw, 2rem)	o-mrg-bl-3	o-mrg-in-3
clamp(2rem, 4vw, 3rem)	o-mrg-bl-4	o-mrg-in-4
clamp(4rem, 5vw, 5rem)	o-mrg-bl-5	o-mrg-in-5
clamp(5rem, 7vw, 7.5rem)	o-mrg-bl-6	o-mrg-in-6
clamp(7.5rem, 10vw, 10rem)	o-mrg-bl-7	o-mrg-in-7
clamp(10rem, 20vw, 15rem)	o-mrg-bl-8	o-mrg-in-8
clamp(15rem, 30vw, 20rem)	o-mrg-bl-9	o-mrg-in-9
clamp(20rem, 40vw, 30rem)	o-mrg-bl-10	o-mrg-in-10

Fluid Margins (Top, Right, Bottom, Left)

link Fluid Margins (Top, Right, Bottom, Left)

Wording

I use the terms Top, Right, Bottom, Left to describe the margin directions. This is for being easily understood by everyone. However, the actual CSS properties are margin-block-start, margin-inline-end, margin-block-end, margin-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	Margin Top	Margin Right	Margin Bottom	Margin Left
clamp(.5rem, 1vw, 1rem)	o-mrg-t-1	o-mrg-r-1	o-mrg-b-1	o-mrg-l-1
clamp(1rem, 2vw, 1.5rem)	o-mrg-t-2	o-mrg-r-2	o-mrg-b-2	o-mrg-l-2
clamp(1.5rem, 3vw, 2rem)	o-mrg-t-3	o-mrg-r-3	o-mrg-b-3	o-mrg-l-3
clamp(2rem, 4vw, 3rem)	o-mrg-t-4	o-mrg-r-4	o-mrg-b-4	o-mrg-l-4
clamp(4rem, 5vw, 5rem)	o-mrg-t-5	o-mrg-r-5	o-mrg-b-5	o-mrg-l-5
clamp(5rem, 7vw, 7.5rem)	o-mrg-t-6	o-mrg-r-6	o-mrg-b-6	o-mrg-l-6
clamp(7.5rem, 10vw, 10rem)	o-mrg-t-7	o-mrg-r-7	o-mrg-b-7	o-mrg-l-7
clamp(10rem, 20vw, 15rem)	o-mrg-t-8	o-mrg-r-8	o-mrg-b-8	o-mrg-l-8
clamp(15rem, 30vw, 20rem)	o-mrg-t-9	o-mrg-r-9	o-mrg-b-9	o-mrg-l-9
clamp(20rem, 40vw, 30rem)	o-mrg-t-10	o-mrg-r-10	o-mrg-b-10	o-mrg-l-10

Fixed Margins

link Fixed Margins

Value	CSS Variable	Utility Class
-.5rem	--o-size-000	o-mrg-fixed-000
-.25rem	--o-size-00	o-mrg-fixed-00
.25rem	--o-size-1	o-mrg-fixed-1
.5rem	--o-size-2	o-mrg-fixed-2
1rem	--o-size-3	o-mrg-fixed-3
1.25rem	--o-size-4	o-mrg-fixed-4
1.5rem	--o-size-5	o-mrg-fixed-5
1.75rem	--o-size-6	o-mrg-fixed-6
2rem	--o-size-7	o-mrg-fixed-7
3rem	--o-size-8	o-mrg-fixed-8
4rem	--o-size-9	o-mrg-fixed-9
5rem	--o-size-10	o-mrg-fixed-10
7.5rem	--o-size-11	o-mrg-fixed-11
10rem	--o-size-12	o-mrg-fixed-12
15rem	--o-size-13	o-mrg-fixed-13
20rem	--o-size-14	o-mrg-fixed-14
30rem	--o-size-15	o-mrg-fixed-15

Fixed Margins (Block and Inline)

link Fixed Margins (Block and Inline)

Value	Margin Block	Margin Inline
-.5rem	o-mrg-bl-fixed-000	o-mrg-in-fixed-000
-.25rem	o-mrg-bl-fixed-00	o-mrg-in-fixed-00
.25rem	o-mrg-bl-fixed-1	o-mrg-in-fixed-1
.5rem	o-mrg-bl-fixed-2	o-mrg-in-fixed-2
1rem	o-mrg-bl-fixed-3	o-mrg-in-fixed-3
1.25rem	o-mrg-bl-fixed-4	o-mrg-in-fixed-4
1.5rem	o-mrg-bl-fixed-5	o-mrg-in-fixed-5
1.75rem	o-mrg-bl-fixed-6	o-mrg-in-fixed-6
2rem	o-mrg-bl-fixed-7	o-mrg-in-fixed-7
3rem	o-mrg-bl-fixed-8	o-mrg-in-fixed-8
4rem	o-mrg-bl-fixed-9	o-mrg-in-fixed-9
5rem	o-mrg-bl-fixed-10	o-mrg-in-fixed-10
7.5rem	o-mrg-bl-fixed-11	o-mrg-in-fixed-11
10rem	o-mrg-bl-fixed-12	o-mrg-in-fixed-12
15rem	o-mrg-bl-fixed-13	o-mrg-in-fixed-13
20rem	o-mrg-bl-fixed-14	o-mrg-in-fixed-14
30rem	o-mrg-bl-fixed-15	o-mrg-in-fixed-15

Fixed Margins (Top, Right, Bottom, Left)

link Fixed Margins (Top, Right, Bottom, Left)

Wording

I use the terms Top, Right, Bottom, Left to describe the margin directions. This is for being easily understood by everyone. However, the actual CSS properties are margin-block-start, margin-inline-end, margin-block-end, margin-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	Margin Top	Margin Right	Margin Bottom	Margin Left
-.5rem	o-mrg-t-fixed-000	o-mrg-r-fixed-000	o-mrg-b-fixed-000	o-mrg-l-fixed-000
-.25rem	o-mrg-t-fixed-00	o-mrg-r-fixed-00	o-mrg-b-fixed-00	o-mrg-l-fixed-00
.25rem	o-mrg-t-fixed-1	o-mrg-r-fixed-1	o-mrg-b-fixed-1	o-mrg-l-fixed-1
.5rem	o-mrg-t-fixed-2	o-mrg-r-fixed-2	o-mrg-b-fixed-2	o-mrg-l-fixed-2
1rem	o-mrg-t-fixed-3	o-mrg-r-fixed-3	o-mrg-b-fixed-3	o-mrg-l-fixed-3
1.25rem	o-mrg-t-fixed-4	o-mrg-r-fixed-4	o-mrg-b-fixed-4	o-mrg-l-fixed-4
1.5rem	o-mrg-t-fixed-5	o-mrg-r-fixed-5	o-mrg-b-fixed-5	o-mrg-l-fixed-5
1.75rem	o-mrg-t-fixed-6	o-mrg-r-fixed-6	o-mrg-b-fixed-6	o-mrg-l-fixed-6
2rem	o-mrg-t-fixed-7	o-mrg-r-fixed-7	o-mrg-b-fixed-7	o-mrg-l-fixed-7
3rem	o-mrg-t-fixed-8	o-mrg-r-fixed-8	o-mrg-b-fixed-8	o-mrg-l-fixed-8
4rem	o-mrg-t-fixed-9	o-mrg-r-fixed-9	o-mrg-b-fixed-9	o-mrg-l-fixed-9
5rem	o-mrg-t-fixed-10	o-mrg-r-fixed-10	o-mrg-b-fixed-10	o-mrg-l-fixed-10
7.5rem	o-mrg-t-fixed-11	o-mrg-r-fixed-11	o-mrg-b-fixed-11	o-mrg-l-fixed-11
10rem	o-mrg-t-fixed-12	o-mrg-r-fixed-12	o-mrg-b-fixed-12	o-mrg-l-fixed-12
15rem	o-mrg-t-fixed-13	o-mrg-r-fixed-13	o-mrg-b-fixed-13	o-mrg-l-fixed-13
20rem	o-mrg-t-fixed-14	o-mrg-r-fixed-14	o-mrg-b-fixed-14	o-mrg-l-fixed-14
30rem	o-mrg-t-fixed-15	o-mrg-r-fixed-15	o-mrg-b-fixed-15	o-mrg-l-fixed-15