CSS Unit Converter — px ↔ rem ↔ em

Đơn vị CSS nào dùng khi nào?

• px — pixel cố định. Dùng cho border, shadow, kích thước icon nhỏ. Không scale với người dùng zoom.
• rem — relative to <html> font-size (mặc định 16px). Tốt cho font-size và spacing — scale tốt khi user đổi default font.
• em — relative to font-size của element cha. Tốt cho padding/margin trong button, badge — scale theo context.
• % — relative to giá trị tương ứng của parent (width/height/font-size). Hữu ích cho fluid layout.
• vw / vh — 1% viewport width/height. Dùng cho hero section full screen, font-size responsive.
• pt — point (1/72 inch). Hiếm dùng web — chủ yếu cho print, PDF.

Quy tắc nhanh

• 16px = 1rem (browser default). Đây là cơ sở mọi tính toán.
• Tailwind dùng rem: p-4 = 1rem = 16px (mặc định).
• Font-size: dùng rem. Border, shadow: dùng px. Hero hero/section size: dùng vh.
• Avoid em trong nested components — dễ scale không kiểm soát.

Tip dùng tool

• Đổi Base font-size nếu trang dùng html { font-size: 14px } — kết quả chuyển ngay.
• Bấm preset 12px / 16px / 24px... để check nhanh font-size phổ biến.
• Click "Copy" trên mỗi card để paste thẳng vào CSS.