มาลองทำความรู้จัก CSS Units ต่าง ๆ ที่ Front-end developer เค้าใช้กัน (Part 1)

CSS Units คือ หน่วยที่ใช้ในการกำหนดค่าต่างๆ ที่เกี่ยวข้องกับขนาด (length)ใน HTML โดยส่วนมากที่เราจะเห็นคือ px, rem, em แต่เรารู้หรือไม่ว่า ยังมีหน่วยอื่นๆ ที่ทุกคนอาจยังไม่เคยพบ เคยเจอมาก่อน มาลองทำความรู้จัดกันในบทความนี้กัน

CSS properties ส่วนมากที่เรานำมาใช้กัน

ได้แก่ width, height, margin, padding, font-size เป็นต้น

กลุ่มของ CSS Units ที่เราจะพูดใน Part นี้คือ Absolute Lengths

Absolute Lengths

คือ หน่วยที่ใช้แสดงความยาวตามขนาดที่กำหนด หรือจะพูดให้เข้าใจง่าย ๆ ก็คือเป็นหน่วยที่ตายตัว ซึ่งที่เราจะเห็นบ่อย ๆ ก็คือ px

cm -> centimeter

mm -> millimeters

in -> inches (1in เท่ากับ 96px หรือเท่ากับ 2.54cm)

pt -> points (1pt หรือเท่ากับ 1/72 ของ 1in)

pc -> picas (1pc เท่ากับ 12pt)

** px -> pixels (1px เท่ากับ 1/96th ของ 1in) **ตัวนี้ใช้บ่อย

pixels (px) คือ หน่วยพื้นฐานของภาพ ซึ่งก็คือ จุดภาพบนจอแสดงผล

Pixel image from Wiki

มาทดสอบ CSS Units ที่เราได้ทำการอธิบายไปในข้างต้นกัน :D

CSS Units for example part 1 By Codepen.io

เป็นไรกันบ้างครับผม ใน part นี้เราจะเจอตัวที่เราใช้บ่อย ๆ แค่ px เดี๋ยว part ถัดไปจะเป็น CSS Units ที่เราจะได้ใช้บ่อย ๆ เช่น rem, em, vw, %

อ้างอิง

• CSS Units (w3schools.com)