ThryndThrynd Docs
GitHub

Spacing Utilities

Margin and padding utilities for consistent spacing using a standardized scale.

Spacing Scale

Thrynd uses a spacing scale from 0-24 based on multiples of 4px.

ClassValuePixelsExample
-000px
m-0p-0
-10.25rem4px
m-1p-1
-20.5rem8px
m-2p-2
-30.75rem12px
m-3p-3
-41rem16px
m-4p-4
-51.25rem20px
m-5p-5
-61.5rem24px
m-6p-6
-82rem32px
m-8p-8
-102.5rem40px
m-10p-10
-123rem48px
m-12p-12
-164rem64px
m-16p-16
-205rem80px
m-20p-20
-246rem96px
m-24p-24

Margin

Control margin on all sides or individual sides.

All Sides

Margin All Sides

m-4
m-8

Individual Sides

Directional Classes

mt-4 → margin-top
mr-4 → margin-right
mb-4 → margin-bottom
ml-4 → margin-left

Axis Classes

mx-4 → margin-left & right
my-4 → margin-top & bottom
mx-auto → auto horizontal centering

Margin Directions

mt-8 (margin-top)
mb-8 (margin-bottom)
mx-8 (margin-x)
mx-auto (centered)

Padding

Control padding on all sides or individual sides.

All Sides

Padding All Sides

p-4
p-8
p-12

Individual Sides

Directional Classes

pt-4 → padding-top
pr-4 → padding-right
pb-4 → padding-bottom
pl-4 → padding-left

Axis Classes

px-4 → padding-left & right
py-4 → padding-top & bottom

Padding Directions

pt-8 (padding-top)
pb-8 (padding-bottom)
px-8 (padding-x)
py-8 (padding-y)

Common Patterns

Card Spacing

Card with Consistent Spacing

Card Title

Content with consistent spacing using utilities.

Section Spacing

Vertical Section Spacing

Section One

Content with proper vertical rhythm.

Section Two

More content with consistent spacing.

Negative Margin

Use negative margins with -m prefix for overlapping elements.

Negative Margin

XL

Overlapping Avatar

Avatar positioned above card edge

← UtilitiesNext: Colors →