การสืบทอดและหน่วย em ใน CSS

สมมติว่าตอนนี้เรามีการซ้อนทับที่ลึกกว่า:

<main>
	<div>
		<p>
			text
		</p>
	</div>
</main>

ให้แท็ก main มีขนาดฟอนต์ดังต่อไปนี้:

main {
	font-size: 10px;
}

กำหนดขนาดฟอนต์ให้แท็ก div เป็น em:

div {
	font-size: 2em; /* เท่ากับ 20px */
}

กำหนดขนาดฟอนต์ให้ย่อหน้า (paragraph) เป็น em ด้วย ในกรณีนี้ มันจะคำนวณขนาดของตัวเอง สัมพันธ์กับขนาดฟอนต์ของ div ที่คำนวณแล้ว:

p {
	font-size: 2em; /* เท่ากับ 40px */
}

โจทย์ปฏิบัติ

สมมติว่าเรามีโค้ด HTML ซึ่งเราจะใช้แก้โจทย์:

<section>
	<div>
		<p>
			text
		</p>
	</div>
</section>

กำหนดว่าขนาดฟอนต์เป็น px ของ div จะเป็นอย่างไร จากการทำงานของ โค้ดต่อไปนี้:

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

กำหนดว่าขนาดฟอนต์เป็น px ของย่อหน้า (paragraph) จะเป็นอย่างไร จากการทำงานของ โค้ดต่อไปนี้:

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

section {
	font-size: 40px;
}
div {
	font-size: 0.5em;
}
p {
	font-size: 0.5em;
}