Shrnutí

V této lekci jsme se dozvěděli, že:

• Preflight odstraňuje okraje a polstrování, které prvkům dává prohlížeč, takže každou mezeru přidáváte sami.
• Škála mezer Tailwindu má kroky po 0.25rem, tedy po 4 pixelech: p-1 jsou 4 pixely, p-4 16 a p-8 32. Když vybíráte z několika kroků, mezery na celém webu k sobě ladí.
• p-* nastaví polstrování na všech stranách, px-* vlevo a vpravo, py-* nahoře a dole a pt-*, pr-*, pb-* a pl-* na jedné straně.
• Okraje fungují stejně, jen s m: m-*, mx-*, my-*, mt-*, mr-*, mb-* a ml-*. Mezi prvky pod sebou je nejjednodušší dělat mezery jen z jedné strany, třeba pomocí mt-*.
• Na pořadí tříd v atributu class nezáleží: třída pro jednu stranu (pt-8) vyhraje nad třídou pro všechny strany (p-4). Nedávejte prvku dvě třídy pro totéž.
• w-* a h-* nastavují šířku a výšku na stejné škále (w-64 je 256 pixelů). w-full je šířka rodiče, zlomky jako w-1/2 její podíl a w-screen a h-screen velikost okna.
• max-w-sm, max-w-md a další nastavují maximální šířku, takže se prvek na úzkých obrazovkách zúží. Spolu s mx-auto vytvoří vycentrovaný sloupec, jako je naše karta.
• Výšku je většinou nejlepší nechat na obsahu. min-h-screen udělá prvek aspoň tak vysoký jako okno.
• size-* nastaví šířku i výšku najednou a i leading-* přijímá čísla ze škály.
• Do hranatých závorek můžete napsat jakoukoli hodnotu CSS, třeba bg-[#fdf6ec] nebo w-[350px] (libovolné hodnoty), a to bez mezer. Používejte je jen výjimečně: škála a paleta drží web jednotný.
• Lišta Šířka náhledu ukáže stránku v šířce telefonu (375 px) nebo obrazovky počítače.

Lunina karta teď má místo uvnitř i kolem sebe a rozumnou šířku a na jakékoli obrazovce zůstává uprostřed stránky. V příští lekci, Rámečky, stíny a obrázky, dáte podobným kartám rámečky, zaoblené rohy, stíny a obrázek.

Na procvičení jsme pod kartu přidali oznámení s adresou útulku. Dejte mu mezery a šířku pomocí toho, co jste se v této lekci naučili.