Generátor škály odsazení
Generátor škály mezer sestaví systém mezer ze základní jednotky 4, 5, 6 nebo 8 px ve 12, 16 nebo 20 krocích a exportuje ho jako CSS custom properties v px nebo rem.
O tomto nástroji
Generátor škály mezer sestaví systém mezer ze základní jednotky 4, 5, 6 nebo 8 px ve 12, 16 nebo 20 krocích a exportuje ho jako CSS custom properties v px nebo rem.
Jak ho použít
- Zvol základní jednotku, například 4 px nebo 8 px.
- Vyber výstup v px nebo rem.
- Zvol, kolik kroků potřebuješ.
- Klikni na Kopírovat CSS proměnné a přidej škálu do svého stylesheetu.
Dobré vědět
- Mezery v Tailwind CSS vycházejí z jednotky 4 px (0.25 rem).
- Material Design používá mřížku 8 dp a 4 dp pro drobné úpravy.
- Násobky jako 0.5, 1, 1.5, 2, 3, 4, 6 a 8 pokryjí většinu potřeb.
- Hodnoty rem zde předpokládají kořenovou velikost písma 16 px.
- Pevná škála nahrazuje nahodilé hodnoty v pixelech a udržuje layout vizuálně jednotný.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Mám použít systém mezer 4px, nebo 8px?
8 px je běžný výchozí základ pro layouty; 4 px dává jemnější kontrolu u hutných rozhraní a malých komponent. Mnoho týmů používá kroky po 4 px v rámci 8px rytmu.
Co je škála mezer v design systémech?
Předem daná sada hodnot pro okraje, vnitřní odsazení a mezery (gap), aby každá obrazovka používala stejné přírůstky.
Jak škálu použiju v CSS?
Zkopíruj proměnné a používej je například jako padding: var(--space-4); aby mezery zůstaly jednotné napříč komponentami.
Je to totéž jako mezery v Tailwindu?
Se základem 4 px a výstupem v rem odpovídají hodnoty stejným násobkům jako výchozí škála mezer v Tailwindu.