View Latest

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

← Previous
Container

Next →
Size