Skip to content
Mesh

Spacing

We have 10 spacing sizes. These are used for all margins and padding on any element and are defined in our Theme.

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

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.

012345678910
Theme ≥ 4.0.00px4px8px12px16px24px32px48px64px96px128px
Theme < 4.0.00px5px10px20px40px60px80px

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 components or mixins provided by styled-components-spacing, the padding and margin props using the Box component, and the space props as part of our other layout components.

Padding

Using the Padding component, padding can be applied to all, or a combination of sides. See the styled-components-spacing Padding documentation for details on accepted props.

Padding
jsx

Margin

Using the Margin component, margins can be applied to all, or a combination of sides. See the styled-components-spacing Margin documentation for details on accepted props.

Margin
jsx

Responsive Padding and Margin

For further flexibility, Padding and Margin components support responsive spacing. An object of breakpoints with spacing sizes is required to inform the desired spacing. Padding and Margin can also be combined for maximum control.

jsx

Mixins

In general, you should use Padding and Margin components over mixins. However, there are instances where the extra DOM layer of the component is troublesome (when adding spacing to our Grid or any flexbox element for example).

Padding mixins

jsx
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

jsx
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)};
`;

Box component

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

Box 1
Box 2
Box 3
Box 4
jsx

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

Heading

Lorem ipsum dolor sit amet.


Item 1
Item 2
jsx