Làm việc với các đơn vị CSS (CSS Units)

Giới thiệu

CSS sử dụng đơn vị độ dài (length units) cho nhiều thuộc tính: width, height, margin, padding, font-size, border-width, top/right/bottom/left, gap, v.v. Giá trị độ dài = số + đơn vị (không khoảng trắng: 16px không phải 16 px).

Phân loại đơn vị

Loại	Đơn vị	Mô tả
Tuyệt đối (Absolute)	`px`	Pixel - đơn vị cơ sở màn hình (96px = 1in)
	`pt`	Point (1pt = 1/72 in) - dùng cho print CSS
	`in`	Inch (1in = 96px = 2.54cm)
	`cm`	Centimet (1cm = 96/2.54 px)
	`pc`	Pica (1pc = 12pt = 1/6 in)
Tương đối (Relative)	`%`	Phần trăm so với parent/context
	`em`	Font-size của parent element
	`rem`	Font-size của root element (`<html>`)
	`ex`	Chiều cao chữ 'x' của font hiện tại
	`ch`	Chiều rộng ký tự '0' của font hiện tại
	`vw`	1% chiều rộng viewport
	`vh`	1% chiều cao viewport
	`vmin`	1% min(viewport-width, viewport-height)
	`vmax`	1% max(viewport-width, viewport-height)

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

px: Border width, box-shadow, border-radius, media query breakpoint (có tranh cãi), pixel-perfect icon
pt, cm, in, pc: Chỉ dùng trong @media print cho layout in ấn

Đơn vị tương đối — Khuyến nghị hiện đại

/* 1. Root font-size responsive */
html { font-size: clamp(14px, 1vw + 0.5rem, 18px); }

/* 2. Hệ thống spacing dựa trên rem */
:root { --space-unit: 1rem; }

/* 3. Component dùng em cho internal spacing */
.card {
  padding: 1.5em;        /* Scale theo font-size card */
  border-radius: 0.5em;
  gap: 0.5em;
}

/* 4. Layout dùng % / fr (grid) / flex */
.container { width: min(90%, 1200px); }

/* 5. Fluid typography */
h1 { font-size: clamp(2rem, 5vw, 4rem); }

Lưu ý quan trọng

Không bao giờ có khoảng trắng giữa số và đơn vị: ✅ 16px | ❌ 16 px
0 không cần đơn vị: margin: 0; (nhưng 0px cũng được)
rem tính từ html font-size, không phải body
em kế thừa lồng nhau (compound) — cẩn thận nested element
Viewport units (vh) trên mobile có vấn đề với address bar — dùng dvh, svh, lvh (CSS Values 4)