Thiết lập cỡ chữ bằng đơn vị em với CSS

Đơn vị em cho font-size

em là đơn vị tương đối, dựa trên **cỡ chữ của phần tử cha**. Mặc định trình duyệt: 1em = 16px (nếu không ghi đè). Công thức: px / 16 = em (khi cha là 16px).

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      /* 30px / 16 = 1.875em */
      font-size: 1.875em;
    }
  </style>
</head>
<body>
  <h1>Tiêu đề demo (1.875em ≈ 30px)</h1>
  <p>Văn bản demo (1em = 16px mặc định).</p>
</body>
</html>

Đặc điểm quan trọng: em **kế thừa và nhân đòn**. Nếu cha font-size: 1.5em, con font-size: 2em → thực tế = 1.5 × 2 = 3em so với gốc. Dùng rem (root em) để tránh nhân đòn, luôn tính từ :root (html).