间距
用于控制元素内边距和外边距的 JSX 样式属性。
内边距
所有边
使用padding 属性将内边距应用于元素的所有边
// raw value
<Box padding="40px" />
<Box p="40px" /> // shorthand
// token value
<Box padding="4" />
<Box p="4" /> // shorthand| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
p,padding | padding | spacing |
特定边
使用 padding{Left,Right,Top,Bottom} 将内边距应用于元素的一侧
<Box paddingLeft="3" />
<Box pl="3" /> // shorthand
<Box paddingTop="3" />
<Box pt="3" /> // shorthand使用 padding{Start,End} 属性将内边距应用于基于文本方向的元素的逻辑轴。
<div className={css({ paddingStart: '8' })} />
<div className={css({ ps: '8' })} /> // shorthand
<div className={css({ paddingEnd: '8' })} />
<div className={css({ pe: '8' })} /> // shorthand| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
pl, paddingLeft | padding-left | spacing |
pr, paddingRight | padding-right | spacing |
pt, paddingTop | padding-top | spacing |
pb, paddingBottom | padding-bottom | spacing |
ps, paddingStart | padding-inline-start | spacing |
pe, paddingEnd | padding-inline-end | spacing |
水平和垂直内边距
使用 padding{X,Y} 属性将内边距应用于元素的水平和垂直轴
<Box paddingX="8" />
<Box px="8" /> // shorthand
<Box paddingY="8" />
<Box py="8" /> // shorthand| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
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 属性将外边距应用于元素的所有边
<Box margin="5" />
<Box m="5" /> // shorthand| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
m,margin | margin | spacing |
特定边
使用 margin{Left,Right,Top,Bottom} 将外边距应用于元素的一侧
<Box marginLeft="3" />
<Box ml="3" /> // shorthand
<Box marginTop="3" />
<Box mt="3" /> // shorthand使用 margin{Start,End} 属性将外边距应用于基于文本方向的元素的逻辑轴。
<Box marginStart="8" />
<Box ms="8" /> // shorthand
<Box marginEnd="8" />
<Box me="8" /> // shorthand| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
ml, marginLeft | margin-left | spacing |
mr, marginRight | margin-right | spacing |
mt, marginTop | margin-top | spacing |
mb, marginBottom | margin-bottom | spacing |
ms, marginStart | margin-inline-start | spacing |
me, marginEnd | margin-inline-end | spacing |
水平和垂直外边距
使用 margin{X,Y} 属性将外边距应用于元素的水平和垂直轴
<Box marginX="8" />
<Box mx="8" /> // shorthand
<Box marginY="8" />
<Box my="8" /> // shorthand| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
mx, marginX | margin-left | spacing |
my, marginY | margin-top | spacing |
间隔
使用 space{X,Y} 属性应用元素之间的间距。这种方法使用猫头鹰选择器 > * + * 来使用 margin* 属性应用元素之间的间距。
信息
当需要负间距时，建议使用 space 属性而不是 gap 属性进行间距设置。<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>| 属性 | CSS 属性 | 令牌类别 |
|---|---|---|
spaceX | margin-inline-start | spacing |
spaceY | margin-block-start | spacing |