Box

Spacing

Values for margin & padding can be a spacing theme variable or a custom string or number.

In order of precedence, Box accepts the following spacing props:

  1. margin[Bottom|Left|Right|Top]
  2. marginStart (left, for left-to-right languages; right, for RTL languages)
  3. marginEnd (right, for left-to-right languages; left, for RTL languages)
  4. marginHorizontal (left & right)
  5. marginVertical (top & bottom)
  6. margin (all sides)

Numbers < 1, e.g. 1/2, will be converted to a percentage. Numbers ≥ 1 will be appended with px. String values, e.g. "4em" or "20%", will be passed directly.

The same applies for padding.

none
xl
6em
120
1/3
/*
 * Spacing theme variables:
 * 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'
 */
<DemoLayout>
  <Box>none</Box>
  <Box marginRight="xl">xl</Box>
  <Box marginRight="6em">6em</Box>
  <Box marginRight={120}>120</Box>
  <Box marginRight={1/3}>1/3</Box>
</DemoLayout>