Amalan Penggunaan em dalam CSS

Mari kita lihat kod HTML penuh untuk halaman:

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

Secara lalai, semua tag pada halaman mempunyai saiz fon tertentu. Sebenarnya, perkara tersebut adalah kerana tag html secara lalai mempunyai saiz fon tertentu:

html {
	font-size: 16px; /* nilai lalai */
}

Oleh itu, kita boleh menentukan saiz kepada tag halaman dalam unit em. Pada masa yang sama, mereka akan mengira saiz mereka relatif kepada ibu bapa langsung.

Sebagai contoh, mari kita tentukan saiz fon untuk tag main:

main {
	font-size: 1.5em; /* bersamaan dengan 24px */
}

Dan sekarang mari kita tentukan saiz fon untuk tag div:

div {
	font-size: 2em; /* bersamaan dengan 48px */
}

Katakan kita mempunyai kod HTML, yang mana kita akan menyelesaikan masalah:

<main>
	<h1>header</h1>
	<div>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</div>
	<div>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</div>
</main>

Dalam semua masalah di bawah, tulis semula ke dalam em semua unit yang ditetapkan dalam piksel:

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