A series of standard values expressed as global css variables, used with padding and margin.
The goal of having a standard spacing scale is to have elements on a page achieve more consistent horizontal and vertical rhythm.
As a reminder, we reset the
html element to use a font-size of 10px, which makes
rem calculation simple.
--space-1 = .4rem = 4px --space-2 = .8rem = 8px --space-3 = 1.6rem = 16px --space-4 = 2.4rem = 24px --space-5 = 3.2rem = 32px --space-6 = 4rem = 40px --space-7 = 4.8rem = 48px --space-8 = 5.6rem = 56px --space-9 = 6.4rem = 64px
These variables are baked into the margin and padding utility classes. They may also be imported via
vars.css and applied to padding and margin rules declared in css.