CSS มีหน่วยวัดหลายแบบ สำคัญ 3 แบบคือ px (absolute), em (relative to font-size), และ % (relative to parent context)
1. PX (Pixels) - หน่วยคงที่
กำหนดขนาดคงที่ในหน่วยพิกเซลของหน้าจอ ไม่เปลี่ยนแปลงตาม context
div { padding: 40px; }
2. EM - หน่วยสัมพัทธ์กับ font-size
1em = font-size ของ element นั้นๆ (หรือสืบทอดมาจาก parent) หาก font-size = 16px แล้ว 1em = 16px, 2em = 32px
p { letter-spacing: 4em; } /* ห่าง 4 เท่าของ font-size ปัจจุบัน */
ข้อควรระวัง: em สะสม (compound) ได้ หาก parent มี font-size: 1.2em และ child ก็มี 1.2em จะได้ 1.44 เท่าของ root
3. Percent (%) - หน่วยสัมพัทธ์กับ parent
คำนวณจากค่าของ parent element (ขึ้นอยู่กับคุณสมบัติ: width/height คำนวณจาก parent's width/height, font-size คำนวณจาก parent's font-size, margin/padding คำนวณจาก parent's width)
p { font-size: 14pt; line-height: 80%; } /* line-height = 80% ของ 14pt = 11.2pt */
ตารางเปรียบเทียบ
| หน่วย | ประเภท | อ้างอิงจาก | เหมาะสำหรับ |
|---|---|---|---|
| px | Absolute | หน้าจอ | Border, shadow, fixed-size elements, media queries |
| em | Relative | font-size ของ element ตัวเอง/parent | Typography, spacing ที่ควร scale กับ font, media queries (accessible) |
| % | Relative | Parent element (context ขึ้นกับ property) | Layout (width/height), responsive design, fluid grids |
| rem | Relative | Root font-size (html element) | Typography system, spacing system ที่ consistent ทั้งเว็บ |
แนวทางปฏิบัติสมัยใหม่: ใช้ rem สำหรับ font-size และ spacing ทั่วไป ใช้ % สำหรับ layout width ใช้ px สำหรับรายละเอียดเล็กๆ (border, box-shadow) หลีกเลี่ยง em สำหรับ spacing เพราะ compounding effect
