Výška

Nad Lunino jméno jsme přidali box s tlapkou: prvek div s emoji 🐾, světle oranžovým pozadím a dolním okrajem (mb-4). Zatím je široký jako karta a vysoký jako řádek textu, který obsahuje.

Výška funguje stejně jako šířka: h-12 (z anglického height) je 12 kroků, tedy 3rem neboli 48 pixelů. A i tady je několik zvláštních tříd:

V kurzu CSS jste se naučili, že výšku je většinou nejlepší nenastavovat: box pak roste s obsahem a nic nepřetéká. To platí i v Tailwindu. Pevná výška se hodí pro prvky, jejichž velikost neurčuje obsah: ikony, barevné pruhy, čáry a obrázky (s obrázky budete pracovat v příští lekci).

h-full je celá výška rodiče, ale stejně jako height: 100% funguje, jen když má rodič nastavenou výšku. h-screen udělá prvek stejně vysoký jako okno prohlížeče. min-h-screen nastaví minimální výšku: prvek bude vysoký aspoň jako okno, ale když jeho obsah potřebuje víc místa, naroste. Proto na stránkách s Tailwindem často uvidíte <body class="min-h-screen">: stránka pak vyplní aspoň celé okno. Hodí se třeba pro svislé centrování, které poznáte v lekci Flexbox, Grid a pozice. (Na naší stránce byste teď rozdíl neviděli: prohlížeč pozadí prvku body stejně vykreslí přes celé okno.)