Spacing

For spacing we use the open source library styled-components-spacing by our good friend and former colleague James Newell.

We recommend using our Layout components to control spacing between elements. They provide more flexibility and control over spacing for different types of layouts.

Size scale

We can apply spacing to individual sides (top, right, bottom, left), or vertical and horizontal sides, as either margin or padding. In version 4.0.0 of our theme we updated our spacing scale to a more standard 16pt based scale.

Be mindful of the Theme version used in your project to determine which spacing scale is in use, and where possible update old versions to version 4.0.0 or above.

Ways to apply spacing

Below are different ways provided by Mesh to apply spacing—using the above size scale—to your design. They include the padding and margin props using the Box component, the space props as part of our other layout components and the use of mixins provided by styled-components-spacing,

Layout components

Layout components are Mesh components that control spacing between elements. They abstract away the logic and provide a user-friendly and intuitive set of props to achieve accurate and flexible spacing for a number of layout designs.

For more information on Layout components, see our Layout docs.

Box component

The Box component acts as a container and accepts props for standard spacing. Combine padding and margin for sizing flexibility.

<>
  <Box background="lightest" display="inline-block" padding={8} marginRight={4}>
    Box 1
  </Box>
  <Box background="lightest" display="inline-block" paddingVertical={6} marginRight={6}>
    Box 2
  </Box>
  <Box background="lightest" display="inline-block" paddingRight={4} paddingBottom={6}>
    Box 3
  </Box>
  <Box background="lightest" display="inline-block" padding={6} marginLeft={4}>
    Box 4
  </Box>
</>

Stack and Inline components

Layout components such as Stack and Inline allow for consistent control over the vertical white space between elements. They allow you to apply a standard spacing size between direct children. Spacing can be responsive and layout components can be nested.

<Stack space={{xs: 4, md: 6}}>
  <div>
    <Stack space={2}>
      <Heading size={3}>Heading</Heading>
      <Copy>Lorem ipsum dolor sit amet.</Copy>
    </Stack>
  </div>
  <Divider />
  <div>
    <Inline space={4}>
      <SmallPlaceholder>Item 1</SmallPlaceholder>
      <SmallPlaceholder>Item 2</SmallPlaceholder>
    </Inline>
  </div>
</Stack>

Mixins

In general, you should use the layout components over mixins. However, there are instances where spacing needs to be controlled in a more intricate way.

Padding mixins

import {p, pt, pr, pb, pl, px, py} from 'styled-components-spacing';

const Example1 = styled.div`
  ${p(4)};
`;

const Example2 = styled(Box)`
  ${pt(1)};
  ${pr(6)};
  ${pb(3)};
  ${pl(5)};
`;

const Example3 = styled.div`
  ${px(6)};
  ${py(4)};
`;

Margin mixins

import {m, mt, mr, mb, ml, mx, my} from 'styled-components-spacing';

const Example1 = styled.div`
  ${m(4)};
`;

const Example2 = styled(Box)`
  ${mt(1)};
  ${mr(6)};
  ${mb(3)};
  ${ml(5)};
`;

const Example3 = styled.div`
  ${mx(6)};
  ${my(4)};
`;