CSS รองรับการวัดจำนวนหนึ่ง รวมถึงหน่วยสัมบูรณ์ เช่น นิ้ว เซนติเมตร จุด และอื่นๆ ตลอดจนการวัดที่เกี่ยวข้อง เช่น เปอร์เซ็นต์และหน่วย em คุณต้องใช้ค่าเหล่านี้ในขณะที่ระบุการวัดต่างๆ ในกฎรูปแบบของคุณ
ต่อไปนี้คือหน่วยการวัด CSS พร้อม:
| หน่วย | คำอธิบาย | ตัวอย่าง |
|---|---|---|
| % | กำหนดการวัดเป็นเปอร์เซ็นต์ที่สัมพันธ์กับค่าอื่น โดยทั่วไปจะเป็นองค์ประกอบที่ล้อมรอบ | p {ขนาดแบบอักษร:16pt; ความสูงของเส้น:125%;} |
| cm | กำหนดหน่วยวัดเป็นเซนติเมตร | div {margin-bottom:2cm;} |
| em | การวัดแบบสัมพัทธ์สำหรับความสูงของฟอนต์ในพื้นที่ em เนื่องจากหน่วย em นั้นเทียบเท่ากับขนาดของฟอนต์ที่กำหนด หากคุณกำหนดฟอนต์เป็น 12pt แต่ละหน่วย "em" จะเป็น 12pt; ดังนั้น 2em จะเป็น 24pt | p {letter-spacing:7em;} |
| ex | ค่านี้กำหนดการวัดที่สัมพันธ์กับ x-height ของฟอนต์ ความสูง x กำหนดโดยความสูงของอักษรตัวพิมพ์เล็ก x | p {ขนาดแบบอักษร:24pt; ความสูงของบรรทัด:3ex;} |
| ใน | กำหนดหน่วยวัดเป็นนิ้ว | p {word-spacing:.15in;} |
| mm | กำหนดหน่วยวัดเป็นมิลลิเมตร | p {word-spacing:15mm;} |
| pc | กำหนดการวัดเป็น picas pica มีค่าเท่ากับ 12 คะแนน; จึงมี 6 picas ต่อนิ้ว | p {ขนาดแบบอักษร:20pc;} |
| pt | กำหนดการวัดเป็นจุด จุดถูกกำหนดเป็น 1/72 นิ้ว | เนื้อหา {ขนาดแบบอักษร:18pt;} |
| px | กำหนดหน่วยวัดเป็นพิกเซลของหน้าจอ | p {padding:25px;} |
| vh | 1% ของความสูงของวิวพอร์ต | h2 { ขนาดแบบอักษร:3.0vh; } |
| vw | 1% ของความกว้างวิวพอร์ต | h1 { ขนาดแบบอักษร:5.9vw; } |
| vmin | 1vw หรือ 1vh แล้วแต่จำนวนใดจะน้อยกว่า | p { ขนาดแบบอักษร:2vmin;} |
