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
/>