Фосилаҳо ва воҳидҳои em дар CSS

Бигзор мо тегҳои зеринро дошта бошем:

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

Бигзор андозаи ҳарфи параграф дар px муайян карда шудааст:

p {
	font-size: 20px;
}

Биёед марҷини ин параграфро бо воҳидҳои em муқаррар кунем. Дар ин ҳолат андозаи фосила аз андозаи ҳарфи худи параграф ҳисоб карда мешавад, на аз андозаи ҳарфи ҷонишини он:

p {
	font-size: 20px;
	margin: 2em;  /* ба 40px мувофиқ аст */
}

Бигзор акнун барои параграф андоза бо em муқаррар шудааст:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* ба 40px мувофиқ аст */
}

Биёед боз margin-ро барои унсури мо муқаррар кунем. Дар ин ҳолат, он ҳамчун пеш аз андозаи ҳарфи ҷории худи унсур ҳисоб карда мешавад. Дар ҳоле ки худи арзиши ҳарф нисбат ба ҷонишин ҳисоб карда мешавад:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* ба 40px мувофиқ аст */
	margin: 2em;    /* ба 80px мувофиқ аст */
}

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

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

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

Муайян кунед, ки кадом андозаи ҳарф ва фосила дар px тегҳои div пас аз иҷрои рамзи зер хоҳанд дошт:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 2em;
}

Муайян кунед, ки кадом андозаи ҳарф ва фосила дар px тегҳои div пас аз иҷрои рамзи зер хоҳанд дошт:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 3em;
}

Муайян кунед, ки кадом андозаи ҳарф ва фосила дар px тегҳои div пас аз иҷрои рамзи зер хоҳанд дошт:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 0.5em;
}

Муайян кунед, ки кадом андозаи ҳарф ва фосила дар px тегҳои p пас аз иҷрои рамзи зер хоҳанд дошт:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 2em;
	margin: 2em;
}

Муайян кунед, ки кадом андозаи ҳарф ва фосила дар px тегҳои p пас аз иҷрои рамзи зер хоҳанд дошт:

section {
	font-size: 10px;
}
div {
	font-size: 1.5em;
}
p {
	font-size: 1em;
	margin: 1.5em;
}