Frontend hay gặpCả hai là đơn vị tương đối theo font-size, nhưng lấy mốc khác nhau:
rem(root em): luôn tính theofont-sizecủa phần tử gốc<html>. Một mốc duy nhất → nhất quán, dễ đoán, không bị dồn tầng.em: với thuộc tínhfont-size, tính theo font-size của phần tử cha; với các thuộc tính khác (padding,margin,width...), tính theo font-size của chính phần tử. Khi lồng nhiều cấp,emnhân dồn (compounding) → dễ lệch ngoài ý muốn.
Ví dụ: cha 2em, con 2em → con thực tế 4em so với gốc.
Thực hành:
- rem cho font-size, spacing tổng thể, layout — ổn định và hỗ trợ accessibility (người dùng chỉnh cỡ chữ trình duyệt).
- em khi muốn thành phần co giãn theo cỡ chữ cục bộ (vd padding của một nút tỉ lệ với chữ trong nút).
- Tránh đặt font-size bằng px cố định trên <html> để không chặn tùy chỉnh của người dùng.