Skip to main content

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 selectorsProperties & values
.m-t-2margin-top: var(--rbrh-spacing-2);
.m-t-4margin-top: var(--rbrh-spacing-4);
.m-t-6margin-top: var(--rbrh-spacing-6);
.m-t-8margin-top: var(--rbrh-spacing-8);

Margin - bottom

.m-b-2

.m-b-4

.m-b-6

.m-b-8

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

Margin - left

.m-l-2

.m-l-4

.m-l-6

.m-l-8

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

Margin - right

.m-r-2

.m-r-4

.m-r-6

.m-r-8

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

Margin - X axis

.m-x-2

.m-x-4

.m-x-6

.m-x-8

ClassProperties
.m-x-2margin-right: var(--rbrh-spacing-2); margin-left: var(--rbrh-spacing-2);
.m-x-4margin-right: var(--rbrh-spacing-4); margin-left: var(--rbrh-spacing-4);
.m-x-6margin-right: var(--rbrh-spacing-6); margin-left: var(--rbrh-spacing-6);
.m-x-8margin-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

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