Įvadas į em vienetus CSS

em vienetai leidžia nustatyti šrifto dydį procentais nuo tėvinio elemento dydžio. Pažiūrėkime pavyzdžiu.

Tarkime, kad turime šiuos įdėtus tag'us:

<div>
	<p>
		text
	</p>
</div>

Nustatykime šrifto dydį mūsų div'ui:

div {
	font-size: 20px;
}

O pastraipai nustatykime dydį 2em. Ši reikšmė atitinka šriftą dvigubai didesnį už tėvinio elemento šrifto dydį:

p {
	font-size: 2em; /* atitinka 40px */
}

O dabar pastraipai nustatykime dydį 0.5em. Ši reikšmė atitinka pusę tėvinio elemento šrifto dydžio:

p {
	font-size: 0.5em; /* atitinka 10px */
}

Reikšmė 1em padarys pastraipos šriftą tokį patį, kaip ir tėvinio div'o:

p {
	font-size: 1em; /* atitinka 20px */
}

Praktinės užduotys

Tarkime, kad turime HTML kodą, kuriam mes spręsime užduotis:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Nustatykite, kokį šrifto dydį px turės li tag'ai vykdžius šį kodą:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Nustatykite, kokį šrifto dydį px turės li tag'ai vykdžius šį kodą:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Nustatykite, kokį šrifto dydį px turės li tag'ai vykdžius šį kodą:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}