Ievads em vienībās CSS

em vienības ļauj iestatīt fonta izmēru procentos no vecāka elementa izmēra. Apskatīsim piemērā.

Pieņemsim, ka mums ir šādi ligzdotie tagi:

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

Iestatīsim mūsu div elementam fonta izmēru:

div {
	font-size: 20px;
}

Un rindkopai iestatīsim izmēru 2em. Šī vērtība atbilst fonta izmēram, kas ir divas reizes lielāks par vecāka elementa fonta izmēru:

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

Tagad rindkopai iestatīsim izmēru 0.5em. Šī vērtība atbilst pusei no vecāka elementa fonta izmēra:

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

Vērtība 1em padarīs rindkopas fonta izmēru tādu pašu kā vecākā div elementa:

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

Praktiskie uzdevumi

Pieņemsim, ka mums ir HTML kods, kuram mēs risināsim uzdevumus:

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

Nosakiet, kāds fonta izmērs px būs li tagiem, izpildot šādu kodu:

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

Nosakiet, kāds fonta izmērs px būs li tagiem, izpildot šādu kodu:

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

Nosakiet, kāds fonta izmērs px būs li tagiem, izpildot šādu kodu:

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