Spacing

# Guidelines

The Cedar spacing system is based on 16px units. The scaling system uses fractions and multiples of the base size (16px). The result is easy to understand. Please note that 1 rem equals 10 pixels.


System scale Pixel values Rem values
1/8 space 2px 0.2rem
1/4 space 4px 0.4rem
1/2 space 8px 0.8rem
3/4 space 12px 1.2rem
1 space 16px 1.6rem
1 1/2 spaces 24px 2.4rem
2 spaces 32px 3.2rem
4 spaces 64px 6.4rem

Learn more about using Cedar's spacing system and layout usage guidance in the Spacing for Layouts article.