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

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

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

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

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

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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