Margin - v3
Margin utility classes in CodyFrame v3 (based on the spacing variables):
| CSS Class | Description |
|---|---|
m{p}argin-xxxxs |
margin: var(--space-xxxxs); |
m{p}argin-xxxs |
margin: var(--space-xxxs); |
m{p}argin-xxs |
margin: var(--space-xxs); |
m{p}argin-xs |
margin: var(--space-xs); |
m{p}argin-sm |
margin: var(--space-sm); |
m{p}argin-md |
margin: var(--space-md); |
m{p}argin-lg |
margin: var(--space-lg); |
m{p}argin-xl |
margin: var(--space-xl); |
m{p}argin-xxl |
margin: var(--space-xxl); |
m{p}argin-xxxl |
margin: var(--space-xxxl); |
m{p}argin-xxxxl |
margin: var(--space-xxxxl); |
m{p}argin-auto |
margin: auto; |
m{p}argin-0 |
margin: 0; |
Target a specific side using .margin-{side}-{size}:
| CSS Class | Description |
|---|---|
m{p}argin-top-xs |
margin-top: var(--space-xs); |
m{p}argin-bottom-xl |
margin-bottom: var(--space-xl); |
m{p}argin-right-auto |
margin-right: auto; |
m{p}argin-left-md |
margin-left: var(--space-md); |
Target left and right using .margin-x-{size}:
| CSS Class | Description |
|---|---|
m{p}argin-x-sm |
margin-left: var(--space-sm); margin-right: var(--space-sm); |
Target top and bottom using .margin-y-{size}:
| CSS Class | Description |
|---|---|
m{p}argin-y-md |
margin-top: var(--space-md); margin-bottom: var(--space-md); |
Responsive #
Edit the margin utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).
Example:
<div class="margin-md margin-auto@lg"><!-- content --></div>
