Spacing

The space key allows you to customize the global spacing and sizing scale for your project. By default, these spacing values can be referenced by the padding, margin, top, left, right, and bottom styles.

export const space = {
  '1x': '.25rem',
  '2x': '.5rem',
  '3x': '.75rem',
  '4x': '1rem',
  '5x': '1.25rem',
  '6x': '1.5rem',
  '7x': '1.75rem',
  '8x': '2rem',
  '9x': '2.25rem',
  '10x': '2.5rem',
  '11x': '2.75rem',
  '12x': '3rem',
  '13x': '3.25rem',
  '14x': '3.5rem',
  '15x': '3.75rem',
  '16x': '4rem',
  '17x': '4.25rem',
  '18x': '4.5rem',
  '19x': '4.75rem',
  '20x': '5rem',
  '24x': '6rem',
  '32x': '8rem',
  '40x': '10rem',
  '48x': '12rem',
  '56x': '14rem',
  '64x': '16rem'
}

By default, the values are proportional. Therefore, a 1x spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="6x">
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="1x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="2x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="4x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
</Stack>
<Stack direction="column" spacing="6x">
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="1x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="2x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
  <Box>
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" mr="4x" />
    <Box display="inline-block" width="18x" height="18x" bg="gray:70" />
  </Box>
</Stack>