Spacing

Style properties for controlling the padding of an element.

Padding and margin utilities reference the spacing token category. The {Start|End} variants map to logical properties that follow the text direction.

Padding

<div className={css({ padding: '4' })} />
<div className={css({ p: '4' })} /> // shorthand

Prop	CSS Property	Token Category
`p`,`padding`	`padding`	`spacing`
`pl`, `paddingLeft`	`padding-left`	`spacing`
`pr`, `paddingRight`	`padding-right`	`spacing`
`pt`, `paddingTop`	`padding-top`	`spacing`
`pb`, `paddingBottom`	`padding-bottom`	`spacing`
`px`, `paddingX`	`padding-inline`	`spacing`
`py`, `paddingY`	`padding-block`	`spacing`
`ps`, `paddingStart`	`padding-inline-start`	`spacing`
`pe`, `paddingEnd`	`padding-inline-end`	`spacing`

Margin

<div className={css({ margin: '5' })} />
<div className={css({ m: '5' })} /> // shorthand

Prop	CSS Property	Token Category
`m`,`margin`	`margin`	`spacing`
`ml`, `marginLeft`	`margin-left`	`spacing`
`mr`, `marginRight`	`margin-right`	`spacing`
`mt`, `marginTop`	`margin-top`	`spacing`
`mb`, `marginBottom`	`margin-bottom`	`spacing`
`mx`, `marginX`	`margin-inline`	`spacing`
`my`, `marginY`	`margin-block`	`spacing`
`ms`, `marginStart`	`margin-inline-start`	`spacing`
`me`, `marginEnd`	`margin-inline-end`	`spacing`