간격

간격 (Spacing)

요소의 패딩과 마진을 제어하는 JSX 스타일 prop을 알려드려요. 요소 간 간격을 쉽게 조절할 수 있어요.

출처: 문서

본문

Padding

모든 면

padding prop을 사용해서 요소의 모든 면에 패딩을 적용하세요.

// raw value
<Box padding="40px" />
<Box p="40px" /> // shorthand

// token value
<Box padding="4" />
<Box p="4" /> // shorthand

특정 면

padding{Left,Right,Top,Bottom}을 사용해서 요소의 한 면에 패딩을 적용하세요.

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

<Box paddingTop="3" />
<Box pt="3" /> // shorthand

텍스트 방향에 따라 요소의 논리 축에 패딩을 적용하려면 padding{Start,End} prop을 사용하세요.

<div className={css({ paddingStart: '8' })} />
<div className={css({ ps: '8' })} /> // shorthand

<div className={css({ paddingEnd: '8' })} />
<div className={css({ pe: '8' })} /> // shorthand

가로/세로 패딩

padding{X,Y} prop을 사용해서 요소의 가로/세로 축에 패딩을 적용하세요.

<Box paddingX="8" />
<Box px="8" /> // shorthand

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

Margin

모든 면

margin prop을 사용해서 요소의 모든 면에 마진을 적용하세요.

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

특정 면

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

가로/세로 마진

margin{X,Y} 속성을 사용해서 요소의 가로/세로 축에 마진을 적용하세요.

<Box marginX="8" />
<Box mx="8" /> // shorthand

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

Spacing Between

space{X,Y} prop을 사용해서 요소 사이에 간격을 적용하세요. 이 방법은 올빼미 선택자(owl selector) > * + *를 사용해서 margin* 속성으로 요소 사이에 간격을 적용해요.

:::info

음수 간격이 필요할 때는 gap prop보다 space prop을 사용하는 것이 좋아요.

:::

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

더 알아보기 (Learn more)

• Style Props - Layout
• Style Props - Sizing