rem vs em vs px

px — ค่าคงที่ตามพิกเซลของ CSS ไม่สืบทอดแบบสเกลจากพ่อโดยตรง

em — สัมพันธ์กับ font-size ของเอลิเมนต์นั้น (หรือพ่อเมื่อคำนวณบางอย่าง) · ซ้อนหลายชั้นอาจโต/หดสะสม

rem — สัมพันธ์กับ font-size ของ html (root) · ควบคุมสเกลทั้งหน้าได้ง่ายกว่า

html { font-size: 100%; } /* มัก ~16px ตามเบราว์เซอร์ */
body { font-size: 1rem; }
.lead { font-size: 1.25rem; }
.small { font-size: 0.875rem; }

แนวทางบทเรียนนี้: ขนาดตัวอักษรหลักใช้ rem · ระยะที่ผูกกับตัวอักษรชิ้นนั้นอาจใช้ em · เส้นบาง ๆ หรือไอคอนบางทีใช้ px