Space
Useful for setting the space around an element.
Things like padding, margin, gaps, etc.
:where(html) {
--space-1: clamp(0.125rem, 0.125rem + 0vw, 0.125rem); /* 2px ~ 2px */
--space-2: clamp(0.3125rem, 0.2908rem + 0.1087vw, 0.375rem); /* 5px ~ 6px */
--space-3: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem); /* 9px ~ 10px */
--space-4: clamp(0.8125rem, 0.7908rem + 0.1087vw, 0.875rem); /* 13px ~ 14px */
--space-5: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem); /* 16px ~ 18px */
--space-6: clamp(1.375rem, 1.3315rem + 0.2174vw, 1.5rem); /* 22px ~ 24px */
--space-7: clamp(1.8125rem, 1.7473rem + 0.3261vw, 2rem); /* 29px ~ 32px */
--space-8: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem); /* 36px ~ 40px */
--space-9: clamp(2.9375rem, 2.8288rem + 0.5435vw, 3.25rem); /* 47px ~ 52px */
--space-10: clamp(4.25rem, 4.0761rem + 0.8696vw, 4.75rem); /* 68px ~ 76px */
}
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--space-10