Introducere în unitățile em în CSS

Unitățile em permit setarea dimensiunii fontului în procente față de dimensiunea părintelui. Să vedem un exemplu.

Să presupunem că avem următoarele taguri imbricate:

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

Să setăm dimensiunea fontului pentru div-ul nostru:

div {
	font-size: 20px;
}

Iar pentru paragraf să setăm dimensiunea în 2em. Această valoare corespunde unui font de două ori mai mare decât dimensiunea fontului părintelui:

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

Acum să setăm pentru paragraf dimensiunea în 0.5em. Această valoare corespunde la jumătate din dimensiunea fontului părintelui:

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

Valoarea 1em va face ca fontul paragrafului să fie la fel ca cel al div-ului părinte:

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

Probleme practice

Să presupunem că avem codul HTML, pentru care vom rezolva probleme:

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

Determinați ce dimensiune a fontului în px vor avea tagurile li în urma executării următorului cod:

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

Determinați ce dimensiune a fontului în px vor avea tagurile li în urma executării următorului cod:

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

Determinați ce dimensiune a fontului în px vor avea tagurile li în urma executării următorului cod:

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