Spacing
Master visual balance with Luxa CSS's fluid spacing system. Perfectly balanced for any screen size.
As the Typography section states, Luxa CSS builds on a fluid scaling system that dynamically adjusts sizes according to the viewport width.
This fluidity comes from a simple formula in the CSS’s clamp function , ensuring that everything is perfectly balanced, regardless of the screen size.
| Name | Min size (px) | Calc (px + vw) | Max size (px) |
|---|---|---|---|
--space-01 | 12 | 11.33px + 0.2083vw | 14 |
--space-02 | 18 | 17px + 0.3125vw | 21 |
--space-03 | 24 | 22.67px + 0.4167vw | 28 |
--space-04 | 36 | 34px + 0.625vw | 42 |
--space-05 | 48 | 45.33px + 0.8333vw | 56 |
--space-06 | 72 | 68px + 1.25vw | 84 |