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

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

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

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

cssmain {
  font-size: 10px;
}

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

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

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

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

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

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

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

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

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

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