margin

A utility to specify margin.

function margin(options: BoxSpacingOption): SerializedStyles;
const margin.<x|y|top|right|bottom|left><4|8|12|16|32>: SerializedStyles;

Examples

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

export default function App() {
  return (
    <>
      <div css={margin(24)}>
        Margin 24
      </div>
      <div css={margin.y12}>
        Margin Y 12
      </div>
      <div css={margin.left(24)}>
        Margin left 24
      </div>
    </>
  );
}

// css`margin: 4px`;
<div css={margin(4)} />;

// css`
//   margin-left: 8px;
//   margin-right: 8px;
//   margin-bottom: 4px;
// `
margin({
  x: 8,
  bottom: 4,
});

// css`
//   margin-left: 12px;
//   margin-right: 12px;
// `
margin.x(4);

// css`
//   margin-top: 12px;
//   margin-bottom: 12px;
// `
margin.y12;

// css`margin-left: 8px;`
margin.left(8);