Амалияҳои истифодаи em дар CSS

Биёед коди комили саҳифаи HTML-ро бубинем:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<main>
			<div>
				<p>
					матн
				</p>
			</div>
		</main>
	</body>
<html>

Ба таври пешфарз ҳамаи тегҳои саҳифа андозаи муайяни ҳарфҳоро доранд. Дар асл, масъала ин аст, ки теги html ба таври пешфарз андозаи муайяни ҳарфҳоро дорад:

html {
	font-size: 16px; /* қимати пешфарз */
}

Аз ин рӯ, мо метавонем ба тегҳои саҳифа андозаҳоро дар em муайян кунем. Дар ин ҳолат, онҳо андозаҳои худро нисбат ба волидони бевосита ҳисоб мекунанд.

Масалан, биёед ба теги main андозаи ҳарфҳоро муайян кунем:

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

Ва акнун ба теги div андозаи ҳарфҳоро муайян кунем:

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

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

<main>
	<h1>сарпуш</h1>
	<div>
		<p>
			матн
		</p>
		<p>
			матн
		</p>
	</div>
	<div>
		<p>
			матн
		</p>
		<p>
			матн
		</p>
	</div>
</main>

Дар ҳамаи масъалаҳои дар поён, дар em ҳамаи воҳидҳоро, ки дар пикселҳо муайян шудаанд, нависед:

main {
	margin: 16px auto;
}

h1 {
	font-size: 32px;
}
p {
	font-size: 32px;
}

main {
	margin: 32px auto;
}

h1 {
	font-size: 32px;
}
div {
	font-size: 16px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
}