Space
Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use rem units in order to scale proportionately with the root font size.
You can use --wa-space-scale to increase or decrease all spacing at once. By default, this multiplier is 1.
The calculations for each size and the resulting pixel value (assuming a 16px root font size) are listed below.
| Custom Property | Default Value | Preview - |
|---|---|---|
--wa-space-3xs |
calc(var(--wa-space-scale) * 0.125rem) (2px) |
|
--wa-space-2xs |
calc(var(--wa-space-scale) * 0.25rem) (4px) |
|
--wa-space-xs |
calc(var(--wa-space-scale) * 0.5rem) (8px) |
|
--wa-space-s |
calc(var(--wa-space-scale) * 0.75rem) (12px) |
|
--wa-space-m |
calc(var(--wa-space-scale) * 1rem) (16px) |
|
--wa-space-l |
calc(var(--wa-space-scale) * 1.5rem) (24px) |
|
--wa-space-xl |
calc(var(--wa-space-scale) * 2rem) (32px) |
|
--wa-space-2xl |
calc(var(--wa-space-scale) * 2.5rem) (40px) |
|
--wa-space-3xl |
calc(var(--wa-space-scale) * 3rem) (48px) |
|
--wa-space-4xl |
calc(var(--wa-space-scale) * 4rem) (64px) |