Đơn vị tuyệt đối (Absolute Units) trong CSS

Giới thiệu

Đơn vị tuyệt đối (absolute units) đại diện cho kích thước vật lý cố định, không phụ thuộc vào font-size, viewport hay parent element. Chúng được định nghĩa dựa trên hệ đo lường thực tế.

Bảng đơn vị tuyệt đối

Đơn vị	Viết tắt	Định nghĩa	Tương đương	Dùng cho
Pixel	`px`	1/96 inch (CSS reference pixel)	1px = 1px	Màn hình, border, shadow, radius, breakpoint (có tranh cãi)
Point	`pt`	1/72 inch	1pt = 4/3 px ≈ 1.33px	Print CSS, typography in ấn
Inch	`in`	1 inch vật lý	1in = 96px = 2.54cm	Print CSS, layout in ấn
Centimet	`cm`	1 centimet	1cm = 96/2.54 px ≈ 37.8px	Print CSS
Pica	`pc`	1/6 inch = 12pt	1pc = 16px	Print CSS, typography truyền thống
Millimet	`mm`	1 milimet	1mm = 1/10 cm ≈ 3.78px	Print CSS
Quarter-millimet	`Q`	1/40 cm = 0.25mm	1Q = 0.96px	Print CSS, typography chính xác

Quan hệ chuyển đổi (CSS Reference Pixel)

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
1px = 1/96 in = 0.264583mm = 0.75pt

Khi nào dùng đơn vị tuyệt đối?

px: Border width (1px), border-radius, box-shadow, outline, media query breakpoint (thường dùng), fixed-size icon/image
pt, cm, mm, in, pc, Q: Chỉ trong @media print cho layout in ấn chính xác

Ví dụ: Print CSS với đơn vị tuyệt đối

@media print {
  @page {
    size: A4;           /* 210mm × 297mm */
    margin: 2cm;        /* Lề 2cm */
  }
  
  body {
    font-size: 12pt;    /* 12pt chuẩn in ấn */
    line-height: 1.5;
  }
  
  .page-break { page-break-before: always; }
  .no-print { display: none; }
  
  /* Đơn vị tuyệt đối chính xác cho in */
  .logo { width: 5cm; height: 3cm; }
  .signature { margin-top: 3cm; }
}

Tại sao KHÔNG dùng px cho font-size/layout responsive?

Không scale theo user preference (browser zoom, system font size)
Vi phạm accessibility (WCAG 1.4.4 Resize text)
Khó maintain: thay đổi scale toàn hệ thống phải sửa hàng chục chỗ
Không responsive tự nhiên trên màn hình high-DPI

Best Practice hiện đại

/* 1. Chỉ dùng px cho "hairline" - đường viền mỏng nhất */
.hairline { border-bottom: 1px solid #eee; }

/* 2. Font-size, spacing dùng rem/em */
html { font-size: 100%; }  /* 16px mặc định, respect user setting */
body { font-size: 1rem; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }

/* 3. Breakpoint dùng rem/em (accessibility) */
@media (min-width: 48rem) { ... }  /* 768px @ 16px base */

/* 4. Print CSS dùng đơn vị vật lý */
@media print {
  .page { width: 21cm; margin: 2cm auto; }
}