หน่วยความยาวแบบสัมบูรณ์ (Absolute Length Units) มีค่าคงที่สัมพันธ์กัน ใช้เมื่อรูปแบบเอาต์พุททราบล่วงหน้า หน่วยหลักมีดังนี้:
| ลำดับ | หน่วยและคำอธิบาย |
|---|---|
| 1 | cm - เซนติเมตร |
| 2 | mm - มิลลิเมตร |
| 3 | in - นิ้ว (1in = 96px = 2.54cm) |
| 4 | px - พิกเซล (1px = 1/96 ของ 1in) * หน่วยหลักสำหรับหน้าจอ |
| 5 | pt - พอยต์ (1pt = 1/72 ของ 1in) ใช้ในพิมพ์ |
| 6 | pc - ไพคา (1pc = 12 pt) ใช้ในพิมพ์ |
ตัวอย่างที่ 1: ใช้หน่วยนิ้ว (in)
<!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; text-decoration-color: blue; font-size: 0.3in; } </style> </head> <body> <h1>Details</h1> <p class="demo">Examination Center near ABC College.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>
ผลลัพธ์
ตัวอย่างที่ 2: ใช้ cm และ mm
<!DOCTYPE html> <html> <head> <style> .demo { font-size: 1cm; } .demo2 { font-size: 5mm; } </style> </head> <body> <h1>ICC Rankings</h1> <p class="demo">ICC Test Rankings released 29th November.</p> <p class="demo2">ICC ODI Rankings released 30th November.</p> </body> </html>
ผลลัพธ์
ความสัมพันธ์ระหว่างหน่วย
1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px
แนวทางการเลือกใช้
- px - ใช้สำหรับหน้าจอ (screen media) หน่วยมาตรฐานของ CSS
- pt, pc - ใช้สำหรับสื่อพิมพ์ (print media) @media print
- cm, mm, in - ใช้สำหรับพิมพ์หรือเมื่อต้องการขนาดจริงในโลกจริง
หมายเหตุ: บนหน้าจอ 1px ไม่ได้เท่ากับ 1 พิกเซลของอุปกรณ์เสมอไป (ขึ้นกับ device pixel ratio) แต่ CSS กำหนด 1px = 1/96in เสมอ
