Spacing Utilities

Flow

These utilities add spacing between children of a container by applying margin to all elements except the first, ideal for controlling vertical spacing in flow layouts like lists or stacked elements.

ClassCSS RuleDescription
Sf-1margin-top: var(--S1);Very small top margin between items
Sf-2margin-top: var(--S2);Small top margin between items
Sf-3margin-top: var(--S3);Medium small top margin
Sf-4margin-top: var(--S4);Medium top margin
Sf-5margin-top: var(--S5);Large top margin
Sf-6margin-top: var(--S6);Very large top margin
Sf-7margin-top: var(--S7);Extra large top margin
Sf-8margin-top: var(--S8);Huge top margin
Sf-9margin-top: var(--S9);Maximal top margin

Margin

ClassApplies ToCSS RuleDescription
Sm-{1-9}margin (all sides)margin: var(--s1)to var(--s9);Very small uniform margin
Smt-{1-9}margin-topmargin-top: var(--s1)to var(--s9);;Small top margin
Smr-{1-9}margin-rightmargin-right: var(--s1)to var(--s9);;Large right margin
Smb-{1-9}margin-bottommargin-bottom: var(--s1)to var(--s9);;Small bottom margin
Sml-{1-9}margin-leftmargin-left: var(--s1)to var(--s9);;Extra-large left margin

Padding

ClassApplies ToCSS RuleDescription
Sp-{1-9}padding (all sides)padding: var(--s1)to var(--s9);Very small uniform padding
Spt-{1-9}padding-toppadding-top: var(--s1)to var(--s9);Medium top padding
Spr-{1-9}padding-rightpadding-right: var(--s1)to var(--s9);Large right padding
Spb-{1-9}padding-bottompadding-bottom: var(--s1)to var(--s9);Small bottom padding
Spl-{1-9}padding-leftpadding-left: var(--s1)to var(--s9);Extra-large left padding

Gap

You only need to use the Sg prefix to apply gap utilities to flex or grid containers.

ClassCSS RuleDescription
Sg-1gap: var(--S1);Very small gap
Sg-2gap: var(--S2);Small gap
Sg-3gap: var(--S3);Medium small gap
Sg-4gap: var(--S4);Medium gap
Sg-5gap: var(--S5);Large gap
Sg-6gap: var(--S6);Very large gap
Sg-7gap: var(--S7);Extra large gap
Sg-8gap: var(--S8);Huge gap
Sg-9gap: var(--S9);Maximal gap