Space Props

Space props help control margin, padding, and other spacing-related properties. All values reference tokens from the theme's space scale.

Available Props

Prop	CSS Property	Theme Key
m	margin	space
mt	margin-top	space
mr	margin-right	space
mb	margin-bottom	space
ml	margin-left	space
mx	margin-x	space
my	margin-y	space
p	padding	space
pt	padding-top	space
pr	padding-right	space
pb	padding-bottom	space
pl	padding-left	space
px	padding-x	space
py	padding-y	space

Theme Scale

// Default space scale in theme
{
  space: {
    0: '0',
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem',
    5: '1.5rem',
    6: '2rem',
    8: '3rem',
    10: '4rem',
    12: '6rem',
  }
}

Usage

<Box 
  m={4}        // margin: 1rem
  px={3}       // padding-left: 0.75rem; padding-right: 0.75rem
  mt={5}       // margin-top: 1.5rem
/>