Spacing

Padding

All sides

Use the padding prop to apply padding on all sides of an element

// raw value
<Box padding="40px" />
<Box p="40px" /> // shorthand

// token value
<Box padding="4" />
<Box p="4" /> // shorthand

Specific side

Use the padding{Left,Right,Top,Bottom} to apply padding on one side of an element

<Box paddingLeft="3" />
<Box pl="3" /> // shorthand

<Box paddingTop="3" />
<Box pt="3" /> // shorthand

Use the padding{Start,End} props to apply padding on the logical axis of an element based on the text direction.

<div className={css({ paddingStart: '8' })} />
<div className={css({ ps: '8' })} /> // shorthand

<div className={css({ paddingEnd: '8' })} />
<div className={css({ pe: '8' })} /> // shorthand

Horizontal and Vertical padding

Use the padding{X,Y} props to apply padding on the horizontal and vertical axis of an element

<Box paddingX="8" />
<Box px="8" /> // shorthand

<Box paddingY="8" />
<Box py="8" /> // shorthand

Margin

All sides

Use the margin prop to apply margin on all sides of an element

<Box margin="5" />
<Box m="5" /> // shorthand

Specific side

Use the margin{Left,Right,Top,Bottom} to apply margin on one side of an element

<Box marginLeft="3" />
<Box ml="3" /> // shorthand

<Box marginTop="3" />
<Box mt="3" /> // shorthand

Use the margin{Start,End} properties to apply margin on the logical axis of an element based on the text direction.

<Box marginStart="8" />
<Box ms="8" /> // shorthand

<Box marginEnd="8" />
<Box me="8" /> // shorthand

Horizontal and Vertical margin

Use the margin{X,Y} properties to apply margin on the horizontal and vertical axis of an element

<Box marginX="8" />
<Box mx="8" /> // shorthand

<Box marginY="8" />
<Box my="8" /> // shorthand

Spacing Between

Use the space{X,Y} props to apply spacing between elements. This approach uses the owl selector > * + * to apply the spacing between the elements using margin* properties.

:::info

It's recommended to use the space prop over the gap prop for spacing when you need negative spacing.

:::

<Box display="flex" spaceX="8">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

<Box display="flex" spaceY="8">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>