บทนำสู่หน่วย em ใน CSS

หน่วย em ช่วยให้คุณกำหนดขนาดตัวอักษรเป็นเปอร์เซ็นต์ของขนาดตัวอักษรขององค์ประกอบแม่ มาดูตัวอย่างกัน

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

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

ลองกำหนดขนาดตัวอักษรให้กับ div ของเรา:

div {
	font-size: 20px;
}

และกำหนดขนาดให้กับพารากราฟเป็น 2em ค่านี้สอดคล้องกับตัวอักษรที่มีขนาดเป็นสองเท่าของขนาดตัวอักษรขององค์ประกอบแม่:

p {
	font-size: 2em; /* สอดคล้องกับ 40px */
}

คราวนี้ลองกำหนดขนาดให้กับพารากราฟเป็น 0.5em ค่านี้สอดคล้องกับครึ่งหนึ่งของขนาดตัวอักษรขององค์ประกอบแม่:

p {
	font-size: 0.5em; /* สอดคล้องกับ 10px */
}

ค่า 1em จะทำให้ขนาดตัวอักษรของพารากราฟเท่ากับของ div แม่:

p {
	font-size: 1em; /* สอดคล้องกับ 20px */
}

โจทย์ฝึกปฏิบัติ

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

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

จงหาว่าแท็ก li จะมีขนาดตัวอักษรเป็นกี่ px หลังจากทำงานโค้ดต่อไปนี้:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

จงหาว่าแท็ก li จะมีขนาดตัวอักษรเป็นกี่ px หลังจากทำงานโค้ดต่อไปนี้:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

จงหาว่าแท็ก li จะมีขนาดตัวอักษรเป็นกี่ px หลังจากทำงานโค้ดต่อไปนี้:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}