Margin

Utility class to organize and implement margin properties. Margin uses all the values from spacing in design tokens.

Read all margin utilities

Margin - top

.m-t-2

.m-t-4

.m-t-6

.m-t-8

Class selectors	Properties & values
.m-t-2	margin-top: var(--rbrh-spacing-2);
.m-t-4	margin-top: var(--rbrh-spacing-4);
.m-t-6	margin-top: var(--rbrh-spacing-6);
.m-t-8	margin-top: var(--rbrh-spacing-8);

Margin - bottom

.m-b-2

.m-b-4

.m-b-6

.m-b-8

Class	Properties
.m-b-2	margin-bottom: var(--rbrh-spacing-2);
.m-b-4	margin-bottom: var(--rbrh-spacing-4);
.m-b-6	margin-bottom: var(--rbrh-spacing-6);
.m-b-8	margin-bottom: var(--rbrh-spacing-8);

Margin - left

.m-l-2

.m-l-4

.m-l-6

.m-l-8

Class	Properties
.m-l-2	margin-left: var(--rbrh-spacing-2);
.m-l-4	margin-left: var(--rbrh-spacing-4);
.m-l-6	margin-left: var(--rbrh-spacing-6);
.m-l-8	margin-left: var(--rbrh-spacing-8);

Margin - right

.m-r-2

.m-r-4

.m-r-6

.m-r-8

Class	Properties
.m-r-2	margin-right: var(--rbrh-spacing-2);
.m-r-4	margin-right: var(--rbrh-spacing-4);
.m-r-6	margin-right: var(--rbrh-spacing-6);
.m-r-8	margin-right: var(--rbrh-spacing-8);

Margin - X axis

.m-x-2

.m-x-4

.m-x-6

.m-x-8

Class	Properties
.m-x-2	margin-right: var(--rbrh-spacing-2); margin-left: var(--rbrh-spacing-2);
.m-x-4	margin-right: var(--rbrh-spacing-4); margin-left: var(--rbrh-spacing-4);
.m-x-6	margin-right: var(--rbrh-spacing-6); margin-left: var(--rbrh-spacing-6);
.m-x-8	margin-right: var(--rbrh-spacing-8); margin-left: var(--rbrh-spacing-8);

Margin - Y axis

.m-y-2

.m-y-4

.m-y-6

.m-y-8

Class	Properties
.m-y-2	margin-top: var(--rbrh-spacing-2); margin-bottom: var(--rbrh-spacing-2);
.m-y-4	margin-top: var(--rbrh-spacing-4); margin-bottom: var(--rbrh-spacing-4);
.m-y-6	margin-top: var(--rbrh-spacing-6); margin-bottom: var(--rbrh-spacing-6);
.m-y-8	margin-top: var(--rbrh-spacing-8); margin-bottom: var(--rbrh-spacing-8);