Pri nastavovaní veľkosti ľubovoľného prvku v CSS máme dve možnosti. Prvým sú absolútne jednotky a druhým relatívne jednotky. Absolútne jednotky sú pevné a nie sú relatívne k ničomu inému. V každom prípade sú vždy rovnaké. Zahŕňajú cm, mm, px atď. Na druhej strane relatívne jednotky sú relatívne k niečomu inému. Môže to byť veľkosť nadradeného prvku alebo veľkosť hlavného HTML. Relatívne jednotky pokrývajú em, rem, vw, vh atď. Sú to škálovateľné jednotky a pomáhajú pri responzívnom dizajne. Mnohí z nás sa môžu zmiasť medzi relatívnymi jednotkami, najmä jednotkami v a rem Jednotky. Poďme rozobrať rozdiel medzi týmito dvoma. V zásade platí, že rem aj em sú škálovateľné a relatívne jednotky veľkosti, ale v prípade em je jednotka relatívna k veľkosti písma jeho nadradeného prvku, zatiaľ čo jednotka rem je relatívna iba ku koreňovej veľkosti písma dokumentu HTML. R v rem znamená koreň.

Poďme ich obom podrobne porozumieť.

1. v United: Jednotka em umožňuje nastavenie veľkosti písma prvku vzhľadom na veľkosť písma jeho rodiča. Keď sa zmení veľkosť rodičovského prvku, automaticky sa zmení aj veľkosť potomka.

Poznámka: Keď sa vo vlastnosti font-size používajú jednotky em, veľkosť je relatívna k veľkosti fontu rodiča. Pri použití na iných vlastnostiach je to relatívne k veľkosti písma samotného prvku. Tu iba prvé vyhlásenie berie odkaz na rodiča.

• Veľkosť písma prvku .child bude 40 pixelov (2*20px).
• Okraj .child bude 60 pixelov . To je 1,5-násobok veľkosti písma nášho prvku (1,5*40px).

Príklad: Tento príklad ukazuje použitie jednotky em v CSS.

HTML

zobraziť skryté aplikácie