본문으로 건너뛰기

gutter

Child Element 사이에 space를 부여합니다.

function gutter(options: { direction: AxisDirection; space?: number; selector?: string }): SerializedStyles;
function gutter(direction: AxisDirection, space?: number, selector?: string): SerializedStyles;

Examples

/** @jsxImportSource @emotion/react */
import { gutter } from '@toss/emotion-utils';

export default function App() {
  return (
    <div css={gutter('horizontal', 16)}>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
    </div>
  );
}

const ButtonContainer = styled.div`
padding: 16px 24px;
${gutter('horizontal', 8)}
`;

<Flex.Center
css={css`
padding: 0px 20px;
${gutter({
direction: 'horizontal',
space: 20,
})}
`}
>
<Foo />
</Flex.Center>;