Škála mezer

V minulé lekci jste stránkám útulku dali barvy a pěkně upravený text. V této lekci jim dáte prostor: místo uvnitř prvků i mezi nimi a správnou šířku a výšku.

Na stránce najdete kartu Luny, která čeká na adopci. Už má třídy z minulé lekce: oranžové jméno, šedé texty, bílou kartu na světle šedé stránce a oranžové tlačítko s bílým textem. Všechno je ale namačkané na sebe: text se dotýká krajů karty, karta se dotýká krajů náhledu a tlačítko těsně obepíná svůj text.

Může za to Preflight. Základní styly Tailwindu odstranily všechny okraje a polstrování, které prvkům dává prohlížeč: mezery kolem nadpisů a odstavců, 8 pixelů kolem body i polstrování uvnitř tlačítek. Žádná mezera se tak neobjeví náhodou: každou přidáte sami pomocí tříd. Začneme polstrováním (padding), tedy místem mezi obsahem prvku a jeho rámečkem.

Třída p-4 dá prvku polstrování na všech čtyřech stranách. Její číslo neudává pixely, ale počet kroků na škále mezer (spacing scale) Tailwindu. Jeden krok je 0.25rem, tedy 4 pixely (při obvyklé základní velikosti písma 16 pixelů), takže p-4 znamená 4 × 4 = 16 pixelů:

.p-4 {
	padding: 1rem; /* = 16 px */
}

(V CSS, které Tailwind vytvoří, uvidíte padding: calc(var(--spacing) * 4): velikost jednoho kroku, uloženou v proměnné --spacing, krát 4. Znamená to totéž.) Nejčastěji budete používat tyto kroky:

Fungují všechna celá čísla (p-5 je 20 pixelů, p-10 40 pixelů) a pro malé mezery i poloviny (p-0.5 jsou 2 pixely, p-1.5 6 pixelů). Častou chybou je psát pixely: p-24 není 24 pixelů, ale 24 kroků, tedy 96 pixelů.

Proč kroky, a ne libovolný počet pixelů? Stránka vypadá uhlazeně, když se v ní velikosti mezer opakují. Když vybíráte z několika velikostí, třeba z 8, 16, 24 a 32 pixelů, karty, tlačítka i boxy na celém webu k sobě sedí a působí jako jeden celek. A nemusíte pokaždé váhat mezi 15, 16 a 17 pixely. Se škálami pracují i designéři. Stejnou škálu navíc používají i třídy pro okraje, šířku a výšku, které v této lekci poznáte.