Mikakati ya Matumizi ya em katika CSS

Wacha tuangalie msimbo kamili wa ukurasa wa HTML:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<main>
			<div>
				<p>
					maandishi
				</p>
			</div>
		</main>
	</body>
<html>

Kwa default, vitambulisho vyote vya ukurasa vna ukubwa fulani wa herufi. Kiukweli jambo ni kwamba, kitambulisho html kwa default kina ukubwa fulani wa herufi:

html {
	font-size: 16px; /* thamani ya default */
}

Kwa hivyo tunaweza kubainisha vitambulisho vya ukurasa vipimo kwa em. Wakati huo huo, zitahesabu vipimo vyake kuhusiana na wazazi wa karibu wa karibu.

Kwa mfano, wacha tubainishe ukubwa wa herufi kwa kitambulisho main:

main {
	font-size: 1.5em; /* inafanana na 24px */
}

Sasa tuweke ukubwa wa herufi kwa kitambulisho div:

div {
	font-size: 2em; /* inafanana na 48px */
}

Hebu tuchukue kuwa tuna msimbo wa HTML, ambao tutatatua kazi:

<main>
	<h1>kichwa</h1>
	<div>
		<p>
			maandishi
		</p>
		<p>
			maandishi
		</p>
	</div>
	<div>
		<p>
			maandishi
		</p>
		<p>
			maandishi
		</p>
	</div>
</main>

Katika kazi zote hapa chini andika upya kwa em vitengo vyote, vilivyobainishwa kwa saizi:

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;
}