Spacing

Padding

Note

See the list of built-in spacing values below.

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.

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

Note

PandaCSS will automagically translate pl/r/t/b to use the start/end/block properties for convenience.

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

Reference