Margin
Utility class to organize and implement margin properties. Margin uses all the values from spacing in design tokens.
Read all margin utilitiesMargin - 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); |