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​
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​
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​
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​
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​
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​
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); |