Layout and Space

Visualising the space in and around components is tricky. This page demonstrates the levels of spacing that can be applied through our space and size scales.

Space

This scale will apply to the space between and internal to elements, it applies to the following common CSS layout properties, margin, padding, grid-gap and flexbox gap.

    base

    0.25rem

    4px

Radius

The radii scale uses similar scale values for applying a border-radius.

    sm

    0.25rem

    4px

    md

    0.5rem

    8px

    lg

    0.75rem

    12px

    xl

    1rem

    16px