Ворид ба воҳидҳои em дар CSS

Воҳидҳои em имкон медиҳанд, ки андозаи ҳарфро бо фоиз аз андозаи элементҳои волидайн таъин кунед. Биёед ба мисол нигарем.

Фарз мекунем, ки мо ин тегҳои часпидашударо дорем:

<div>
	<p>
		матн
	</p>
</div>

Биёед ба диви худ андозаи ҳарфро таъин кунем:

div {
	font-size: 20px;
}

Ва ба абзас андозаи 2em таъин кунем. Ин қимат ба ҳарфе мувофиқат мекунад, ки ду баробар аз андозаи ҳарфи волидайн бузургтар аст:

p {
	font-size: 2em; /* ба 40px мувофиқат мекунад */
}

Ва акнун ба абзас андозаи 0.5em таъин кунем. Ин қимат ба нисфи андозаи ҳарфи волидайн мувофиқат мекунад:

p {
	font-size: 0.5em; /* ба 10px мувофиқат мекунад */
}

Қимати 1em андозаи ҳарфи абзасро ба ҳамон андозаи диви волидайн мегардонад:

p {
	font-size: 1em; /* ба 20px мувофиқат мекунад */
}

Масъалаҳои амалӣ

Фарз мекунем, ки мо рамзи HTML-ро дорем, барои ки масъалаҳоро ҳал мекунем:

<ul>
	<li>матн</li>
	<li>матн</li>
	<li>матн</li>
</ul>

Муайян кунед, ки тегҳои li дар натиҷаи иҷрои рамзи зерин чӣ андозаи ҳарфро дар px хоҳанд дошт:

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

Муайян кунед, ки тегҳои li дар натиҷаи иҷрои рамзи зерин чӣ андозаи ҳарфро дар px хоҳанд дошт:

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

Муайян кунед, ки тегҳои li дар натиҷаи иҷрои рамзи зерин чӣ андозаи ҳарфро дар px хоҳанд дошт:

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