Generátor Stupnice Mezer — Konzistentní Bílý Prostor v Designu

Náhodné hodnoty margin a padding vedou k nekonzistentním rozhraním. Stupnice mezer definuje omezenou sadu hodnot na základě matematických poměrů — podobně jako typografická stupnice.

Přístup pomocí velikostí triček

Tailwind CSS používá základní stupnici 4px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px (nebo 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 v rem jednotkách). Tato jednoduchá lineární stupnice funguje skvěle pro většinu rozhraní. Konzistence je cennější než dokonalá matematická progrese.

Exponenciální stupnice

4, 8, 16, 32, 64px (zdvojení) poskytuje dramatičtější rozdíly v bílém prostoru. Material Design používá 8px jako základní jednotku. Pokyny Apple Human Interface Guidelines používají násobky 4px. Zvolte jednu základní jednotku a držte se jí.

Implementace pomocí CSS proměnných

--spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px; --spacing-8: 32px. Design tokeny propojují proměnné mezer se sémantickými názvy. Tak lze celé rozhraní přeškálovat změnou základu.