Praktik Penggunaan em di CSS

Mari kita lihat kode HTML lengkap halaman:

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

Secara default, semua tag halaman memiliki beberapa ukuran font. Sebenarnya, masalahnya adalah, tag html secara default memiliki beberapa ukuran font:

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

Oleh karena itu, kita dapat menentukan ukuran dalam em untuk tag halaman. Saat melakukannya, mereka akan menghitung ukurannya relatif terhadap induk langsungnya.

Sebagai contoh, mari tentukan ukuran font untuk tag main:

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

Dan sekarang mari tentukan ukuran font untuk tag div:

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

Misalkan kita memiliki kode HTML, yang untuknya kita akan menyelesaikan tugas:

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

Dalam semua tugas di bawah ini, tulis ulang ke dalam em semua unit yang diberikan dalam piksel:

main {
	margin: 1em auto;
}

h1 {
	font-size: 2em;
}
p {
	font-size: 2em;
}

main {
	margin: 2em auto;
}

h1 {
	font-size: 2em;
}
div {
	font-size: 1em;
	margin-bottom: 2em;
}
p {
	font-size: 1.25em;
}