间距

内边距

¥Padding

所有边

¥All sides

使用 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

属性	CSS 属性	标记类别
p,padding	padding	spacing

特定边

¥Specific side

使用 padding{Left,Right,Top,Bottom} 在元素的一侧应用内边距

¥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

使用 padding{Start,End} 属性根据文本方向在元素的逻辑轴上应用内边距。

¥Use the padding{Start,End} props to apply padding on the logical axis of an element based on the text direction.

<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

水平和垂直内边距

¥Horizontal and Vertical padding

使用 padding{X,Y} 属性在元素的水平和垂直轴上应用内边距。

¥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

属性	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

所有边

¥All sides

使用 margin 属性在元素的所有侧应用边距

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

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

属性	CSS 属性	标记类别
m,margin	margin	spacing

特定边

¥Specific side

使用 margin{Left,Right,Top,Bottom} 在元素的一侧应用外边距

¥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

使用 margin{Start,End} 属性根据文本方向在元素的逻辑轴上应用边距。

¥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

属性	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

水平和垂直边距

¥Horizontal and Vertical margin

使用 margin{X,Y} 属性在元素的水平和垂直轴上应用边距。

¥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

属性	CSS 属性	标记类别
mx, marginX	margin-left	spacing
my, marginY	margin-top	spacing

列间距

¥Spacing Between

使用 space{X,Y} 属性在元素之间应用间距。此方法使用 OWL 选择器 > * + *，并通过 margin* 属性应用元素之间的间距。

¥Use the space{X,Y} props to apply spacing between elements. This approach uses the owl selector > * + * to apply the spacing between the elements using margin* properties.

<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