spacing
Spacing values (margin, padding, gap) can use any numeric value freely. Using multiples of 4 is recommended for visual consistency, but not required.
Spacing Scale
| px | Margin | Padding | Gap |
|---|
| 4px | m4px | p4px | gap4px |
| 8px | m8px | p8px | gap8px |
| 12px | m12px | p12px | gap12px |
| 16px | m16px | p16px | gap16px |
| 20px | m2rem | p2rem | gap2rem |
| 24px | m2-4rem | p2-4rem | gap2-4rem |
| 32px | m3-2rem | p3-2rem | gap3-2rem |
| 40px | m4rem | p4rem | gap4rem |
| 48px | m4-8rem | p4-8rem | gap4-8rem |
Direction Prefixes
Margin
| Prefix | Property | Example |
|---|
m | margin | m2rem |
mt | margin-top | mt16px |
mr | margin-right | mr8px |
mb | margin-bottom | mb2-4rem |
ml | margin-left | ml12px |
Padding
| Prefix | Property | Example |
|---|
p | padding | p2rem |
pt | padding-top | pt16px |
pr | padding-right | pr8px |
pb | padding-bottom | pb2-4rem |
pl | padding-left | pl12px |
px | padding-left + right | px2-4rem |
py | padding-top + bottom | py12px |
Gap
| Prefix | Property | Example |
|---|
gap | gap | gap2rem |
rg | row-gap | rg16px |
cg | column-gap | cg2-4rem |
Auto Margins
| Class | CSS |
|---|
mta | margin-top: auto |
mra | margin-right: auto |
mba | margin-bottom: auto |
mla | margin-left: auto |
mxa | margin-left: auto; margin-right: auto |
Negative Spacing
Use the neg- prefix for negative values:
neg-mt10px → margin-top: -10px neg-ml2rem → margin-left: -2rem