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

1
// raw value
2
<Box padding="40px" />
3
<Box p="40px" /> // shorthand
4

5
// token value
6
<Box padding="4" />
7
<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

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

4
<Box paddingTop="3" />
5
<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.

1
<Box paddingStart="8" />
2
<Box ps="8" /> // shorthand
3

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

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

1
<Box paddingX="8" />
2
<Box px="8" /> // shorthand
3

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

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

1
<Box margin="5" />
2
<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

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

4
<Box marginTop="3" />
5
<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.

1
<Box marginStart="8" />
2
<Box ms="8" /> // shorthand
3

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

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

1
<Box marginX="8" />
2
<Box mx="8" /> // shorthand
3

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

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

On this page