CSS รองรับหน่วยวัดหลายอย่าง รวมถึง absolute units เช่น inches, centimeters, points และ relative measures เช่น percentages และ em units คุณต้องใช้ค่าเหล่านี้ขณะระบุการวัดต่างๆ ใน Style rules
หน่วยวัด CSS ดังนี้:
| หน่วย | คำอธิบาย | ตัวอย่าง |
|---|---|---|
| % | กำหนดการวัดเป็นเปอร์เซ็นต์สัมพัทธ์กับค่าอื่น โดยทั่วไปคือ enclosing element | p {font-size: 16pt; line-height: 125%;} |
| cm | กำหนดการวัดในเซนติเมตร | div {margin-bottom: 2cm;} |
| em | การวัดสัมพัทธ์สำหรับความสูงฟอนต์ใน em spaces 1 em = ขนาดฟอนต์ที่กำหนด | p {letter-spacing: 7em;} |
| ex | การวัดสัมพัทธ์กับ x-height ของฟอนต์ (ความสูงตัว x เล็ก) | p {font-size: 24pt; line-height: 3ex;} |
| in | กำหนดการวัดในนิ้ว | p {word-spacing: .15in;} |
| mm | กำหนดการวัดในมิลลิเมตร | p {word-spacing: 15mm;} |
| pc | กำหนดการวัดในพิกา (1 pc = 12 pt, 6 pc = 1 in) | p {font-size: 20pc;} |
| pt | กำหนดการวัดในพอยต์ (1 pt = 1/72 inch) | body {font-size: 18pt;} |
| px | กำหนดการวัดในพิกเซลหน้าจอ | p {padding: 25px;} |
| vh | 1% ของ viewport height | h2 { font-size: 3.0vh; } |
| vw | 1% ของ viewport width | h1 { font-size: 5.9vw; } |
| vmin | 1vw หรือ 1vh ichever is smaller | p { font-size: 2vmin; } |
