Čo je Spacing System?
Spacing system (systém medzier) je súbor pravidiel definujúcich konzistentné medzery medzi prvkami na webe. Typicky používa násobky základnej jednotky (napr. 4px alebo 8px) pre padding, margin a gap.
Definícia Spacing System
Čo je spacing system
Spacing system je systematický prístup k definovaniu medzier a odstupov medzi prvkami používateľského rozhrania. Namiesto náhodných hodnôt (13px, 17px, 22px) používa konzistentné násobky základnej jednotky — najčastejšie 4px alebo 8px.
Systém medzier je základným pilierom každého design systému. Zabezpečuje, že rozhranie vyzerá organizovane a profesionálne na všetkých stránkach a obrazovkách.
Princíp 8px grid
- 4px — minimálna medzera (napr. medzi ikonou a textom)
- 8px — malá medzera (padding vnútri tlačidla)
- 16px — štandardná medzera (medzera medzi formulárovými poľami)
- 24px — stredná medzera (medzera medzi sekciami karty)
- 32px, 48px, 64px — veľké medzery (medzi sekciami stránky)
Výhody spacing systému
Konzistentné medzery vytvárajú vizuálny rytmus — stránka pôsobí harmonicky a profesionálne. Vývojári nemusí hádať hodnoty — vyberajú z preddefinovaných škálou. V Tailwind CSS sú spacing hodnoty zabudované: p-1 (4px), p-2 (8px), p-4 (16px) atď.
Praktický príklad
Príklad: Tím buduje kartový komponent.
Bez spacing systému: Dizajnér nastaví padding karty na 18px, medzeru medzi nadpisom a textom na 11px, margin dole na 23px. Vývojár zaokrúhli na 20px, 10px, 25px. Výsledok sa líši od dizajnu.
So spacing systémom (8px grid): Padding karty 16px, medzera nadpis–text 8px, margin dole 24px. Dizajnér aj vývojár hovoria rovnakým jazykom.
Často kladené otázky
Čo je spacing system?
Spacing system je súbor pravidiel pre konzistentné medzery na webe. Používa násobky základnej jednotky (4px alebo 8px) pre padding, margin a gap.
Prečo sa používa 8px grid?
8px grid je populárny, pretože 8 je deliteľné 2 a 4, čo umožňuje jemné aj hrubé medzery. Väčšina displejov má rozlíšenie deliteľné 8, takže prvky sa zobrazujú ostro.
Ako spacing system súvisí s Tailwind CSS?
Tailwind CSS má zabudovaný spacing systém založený na 4px jednotke. Triedy ako p-1 (4px), p-2 (8px), p-4 (16px) automaticky vynucujú konzistentné medzery.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.