🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


Margin utility classes (based on the spacing variables):

Class Description
.margin-xxxxs margin: var(--space-xxxxs);
.margin-xxxs margin: var(--space-xxxs);
.margin-xxs margin: var(--space-xxs);
.margin-xs margin: var(--space-xs);
.margin-sm margin: var(--space-sm);
.margin-md margin: var(--space-md);
.margin-lg margin: var(--space-lg);
.margin-xl margin: var(--space-xl);
.margin-xxl margin: var(--space-xxl);
.margin-xxxl margin: var(--space-xxxl);
.margin-xxxxl margin: var(--space-xxxxl);
.margin-auto margin: auto;
.margin-0 margin: 0;

Target a specific side using .margin-{side}-{size}:

Class Description
.margin-top-xs margin-top: var(--space-xs);
.margin-bottom-xl margin-bottom: var(--space-xl);
.margin-right-auto margin-right: auto;
.margin-left-md margin-left: var(--space-md);

Target left and right using .margin-x-{size}:

Class Description
.margin-x-sm margin-left: var(--space-sm); margin-right: var(--space-sm);

Target top and bottom using .margin-y-{size}:

Class Description
.margin-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).


<div class="margin-md [email protected]"><!-- content --></div>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us