CSS รองรับหน่วยความยาวหลายหน่วย สามารถแบ่งออกเป็นสองประเภทหลัก: หน่วยความยาวสัมบูรณ์ (การกำหนดความยาวในขนาดสัมบูรณ์ที่ไม่ขึ้นอยู่กับอุปกรณ์แสดงผล) หน่วยความยาวสัมพัทธ์ (การกำหนดความยาวสัมพันธ์กับหน่วยอื่นที่เบราว์เซอร์รู้จัก)
การวัดความยาวสัมบูรณ์สามารถวัดได้ในห้าหน่วย: นิ้ว (นิ้ว) เซนติเมตร (ซม.) มิลลิเมตร (มม.) จุด (จุด เขียนเป็น pt) และความสูงของตัวอักษร (pica เขียนเป็น pc) ความสูงของจุดและประเภทมักใช้เป็นหน่วยการพิมพ์ โดยที่ 1pica=12pt CSS กำหนด 1pica เป็น 1/72in ซึ่งก็คือ 72pica=1in นี่เป็นคำจำกัดความที่ใช้โดยภาษา postscript ของ Adobe ซึ่งมักใช้โดยเครื่องพิมพ์คุณภาพสูง
นอกจากนี้ CSS ยังรองรับความยาว "สัมบูรณ์" ในหน่วยพิกเซล โดยพิกเซลเป็นจุดบนจอแสดงผลคอมพิวเตอร์ อย่างไรก็ตาม เนื่องจากความหนาแน่นของพิกเซลที่แตกต่างกันและความละเอียดในการแสดงผลที่ผู้ใช้เลือก (หน้าจอแสดงผลเดียวกันสามารถรองรับความละเอียด 640*480 หรือความละเอียด 1024*768) ขนาดที่แน่นอนของพิกเซลจะแตกต่างกันไปในจอแสดงผลที่แตกต่างกัน . ดังนั้นความยาวเป็นพิกเซลจึงขึ้นอยู่กับการแสดงผลจริงๆ ข้อดีของการใช้พิกเซลเป็นหน่วยแสดงผลของคอมพิวเตอร์ก็คือพิกเซลเป็นหน่วยที่กำหนดไว้อย่างเคร่งครัด อย่างไรก็ตาม หน่วยพิกเซลอาจทำให้เกิดปัญหาเมื่อพิมพ์เอกสารเว็บ
หน่วยความยาวสัมบูรณ์ เช่น นิ้วและเซนติเมตร มีประโยชน์มากในการจัดวางการพิมพ์ เนื่องจากมีการวางตำแหน่งที่แน่นอนในการจัดวางเอกสารบนกระดาษขนาดคงที่ ด้วยเหตุนี้จึงไม่ควรใช้ความยาวสัมบูรณ์ในเอกสารการแสดงผลทางอิเล็กทรอนิกส์ เนื่องจากจอแสดงผลจะแตกต่างกันระหว่างจอแสดงผลขนาด 6 นิ้ว*4 นิ้ว และ 21 นิ้วในแนวทแยง และไม่มีการรับประกันว่าเบราว์เซอร์จะแสดงความยาวเท่ากันบนจอแสดงผลที่กำหนด แสดงผล เอกสารสามารถแสดงได้โดยใช้พื้นที่หน้าต่างคงที่ (ผู้ใช้สามารถเลือกขนาดของหน้าต่างได้) เมื่อคำนึงถึงความแตกต่างดังกล่าว จึงควรใช้หน่วยที่ปรับขนาดพื้นที่แสดงผลหรือขนาดแบบอักษรของข้อความโดยอัตโนมัติ โชคดีที่มีหน่วยความยาว CSS สามหน่วยที่เปิดใช้งานพฤติกรรมนี้
การวัดความยาวสัมพัทธ์มีสามรูปแบบ: หน่วย em, หน่วย ex และเปอร์เซ็นต์ หน่วย em และ ex กำหนดความยาวสัมพันธ์กับขนาดของแบบอักษร หน่วย em กำหนดความยาวโดยสัมพันธ์กับขนาดจุดที่แท้จริงของแบบอักษร ดังนั้น หากขนาดแบบอักษรปัจจุบันคือ 12pt ดังนั้น 1.5em = 18pt ในทางตรงกันข้าม หน่วย ex กำหนดความยาวสัมพันธ์กับความสูง x ของแบบอักษร กล่าวคือ สัมพันธ์กับความสูงของตัวอักษร "x" ในแบบอักษรปัจจุบัน ด้วยวิธีนี้ ขนาด ex ของหน่วยจะขึ้นอยู่กับขนาดของฟอนต์และประเภทตระกูลฟอนต์ เนื่องจากความสูง x จริงที่ขนาดจุดที่กำหนดจะแตกต่างกันไปในแต่ละตระกูลฟอนต์
ในปัจจุบัน หน่วย em มีความน่าเชื่อถือมากกว่าหน่วย ex: เพื่อให้เข้ากันได้ดีที่สุดระหว่างเบราว์เซอร์ต่างๆ ควรใช้หน่วย em แต่โปรดทราบว่าทั้งหน่วย em และ ex อาจทำให้เกิดปัญหาในการพิมพ์ได้
หน่วยเปอร์เซ็นต์เป็นหน่วยสัมพันธ์ที่สาม หน่วยนี้กำหนดความยาวเป็นเปอร์เซ็นต์ของความยาวสัมพัทธ์ ตามข้อกำหนดของ CSS ความยาวที่เกี่ยวข้องอาจเป็นขนาดตัวอักษรของหน่วยหลักหรือความกว้างของหน่วยรูปแบบหลัก - แต่ละกรณีจะแตกต่างกันไปขึ้นอยู่กับลักษณะของคำถาม มีข้อแม้ที่สำคัญอย่างยิ่ง: เบราว์เซอร์ที่มีอยู่ไม่ได้คำนวณค่าเปอร์เซ็นต์ที่สัมพันธ์กับความกว้างของเซลล์ดังนั้นจึงไม่ได้ใช้ความยาวเปอร์เซ็นต์อย่างถูกต้อง เบราว์เซอร์ทั้งหมดจะคำนวณความยาวเปอร์เซ็นต์ที่ไม่ขึ้นอยู่กับแบบอักษรเป็นเปอร์เซ็นต์ของความกว้างหน้าต่างเบราว์เซอร์ทั้งหมดแทน
รูปแบบของค่าความยาวประกอบด้วยเครื่องหมาย ('+' หรือ '-' ค่าเริ่มต้นคือ '+') ตามด้วยตัวเลข ตามด้วยตัวระบุหน่วย (ตัวย่อสองอักขระ) หน่วยความยาวมีสองรูปแบบ: หน่วยสัมพัทธ์และหน่วยสัมบูรณ์ สไตล์ชีตใช้หน่วยสัมพัทธ์เพื่อให้ง่ายต่อการควบคุมมาตราส่วนจากสื่อหนึ่งไปยังอีกสื่อหนึ่ง (เช่น จากคอมพิวเตอร์ไปยังเครื่องพิมพ์เลเซอร์) หน่วยเปอร์เซ็นต์และค่าคีย์ (เช่น 'x-large') มีข้อดีเหมือนกัน ดังต่อไปนี้:
H1 { ระยะขอบ: 0.5em } ความสูงของแบบอักษรขององค์ประกอบ
H1 { ขอบ: 1ex } ความสูงของตัวอักษร 'x'
ในหน่วยพิกเซลที่สัมพันธ์กับความละเอียดกราฟิกของหน้าจอ หากความหนาแน่นของพิกเซลของอุปกรณ์เอาท์พุตแตกต่างอย่างมากจากหน้าจอคอมพิวเตอร์มาตรฐาน ผู้ใช้จะปรับขนาดค่าพิกเซลใหม่ ค่าพิกเซลที่แนะนำคือ 90dpi ที่ความยาวแขนจากเครื่องอ่าน องค์ประกอบลูกสืบทอดค่าผลลัพธ์ที่คำนวณได้แทนค่าสัมพัทธ์ เช่น:
BODY {
ขนาดตัวอักษร: 12pt;
เยื้องข้อความ: 3em;
-
H1 { ขนาดตัวอักษร: 15pt }
ในตัวอย่างข้างต้น ค่า 'text-indent' ของ 'H1' คือ 36pt ไม่ใช่ 45pt
==================================
em tag--emphasis tag
* em tag ปรากฏเป็นคู่ โดยมี <em >เริ่มต้นด้วย</em>
* คุณสมบัติ:
* ทั่วไป -- คุณสมบัติทั่วไป
* em เป็นตัวย่อของการเน้น