CSS-ում em միավորների ներածություն

em միավորները թույլ են տալիս սահմանել տառատեսակի չափը ծնողի չափի տոկոսով: Եկեք նայենք օրինակով:

Ենթադրենք, մենք ունենք ներդիր պիտակներ.

<div>
	<p>
		տեքստ
	</p>
</div>

Եկեք սահմանենք մեր div-ի տառատեսակի չափը.

div {
	font-size: 20px;
}

Իսկ պարագրաֆին սահմանենք 2em չափ: Այս արժեքը համապատասխանում է ծնողի տառատեսակի չափից երկու անգամ մեծ տառատեսակի.

p {
	font-size: 2em; /* համապատասխանում է 40px */
}

Այժմ պարագրաֆին սահմանենք 0.5em չափ: Այս արժեքը համապատասխանում է ծնողի տառատեսակի չափի կեսին.

p {
	font-size: 0.5em; /* համապատասխանում է 10px */
}

1em արժեքը կդարձնի պարագրաֆի տառատեսակը նույնը, ինչ ծնող div-ինը.

p {
	font-size: 1em; /* համապատասխանում է 20px */
}

Գործնական առաջադրանքներ

Ենթադրենք, մենք ունենք HTML կոդ, որի համար մենք կլուծենք առաջադրանքներ.

<ul>
	<li>տեքստ</li>
	<li>տեքստ</li>
	<li>տեքստ</li>
</ul>

Որոշեք, թե ինչ չափի տառատեսակ px-ով կունենան li պիտակները հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ չափի տառատեսակ px-ով կունենան li պիտակները հետևյալ կոդի կատարման արդյունքում.

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

Որոշեք, թե ինչ չափի տառատեսակ px-ով կունենան li պիտակները հետևյալ կոդի կատարման արդյունքում.

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