Spacing

JSX style props for controlling the padding and margin of an element.

Padding

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

Prop	CSS Property	Token Category
`p`,`padding`	`padding`	`spacing`

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.

<Box paddingStart="8" />
<Box ps="8" /> // shorthand

<Box paddingEnd="8" />
<Box pe="8" /> // shorthand

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

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

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

Prop	CSS Property	Token Category
`m`,`margin`	`margin`	`spacing`

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

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

Prop	CSS Property	Token Category
`mx`, `marginX`	`margin-left`	`spacing`
`my`, `marginY`	`margin-top`	`spacing`

On this page