การกำหนดขนาด ไม่ว่าจะเป็นขนาดของตัวอักษร ความกว้าง ความสูง หรือระยะห่าง ของ element ต่างๆ เป็นสิ่งสำคัญสิ่งหนึ่งที่เราจะออกแบบเว็บไซต์ด้วย CSS เป็นผลสำเร็จ

ผลที่ว่า จะทำให้เราได้หน้าเว็บที่เหมือนกันทุกประการ แม้จะเปิดต่าง Browser (เคล็ดลับสำคัญเลยแหละครับ) รวมถึงหากมีการกำหนด property บางตัวเราจำเป็นต้องกำหนดขนาดให้มันเสมอ

เริ่มต้นกันที่หน่วยซึ่งมีหลายอย่างมากๆ ผมจะอธิบายเฉพาะหน่วยที่ใช้บ่อย 

px อันนี้เป็นหน่วยมาตรฐาน ใช้สำหรับจอภาพ ย่อมาจาก pixel เช่น 14px ก็คือ ขนาด 14 จุดของจอภาพ หน่วยนี้จะแสดงผลได้แม่นยำบนจอภาพเท่านั้นครับ

pt อันนี้จะเป็นหน่วยสำหรับเครื่องพิมพ์เท่านั้นครับ ย่อมาจาก point ซึงหากใช้กน่วยนี้กับ css สำหรับการพิมพ์ จะให้ผลลัพท์ที่แม่นยำกว่า ไม่ว่าจะพิมพิ์ด้วยขนาดเท่าใด เช่น 8pt หากเราใช้ pt กับการแสดงผลบนจอภาพ Browser จะทำการแปลง pt ไปเป็นขนาดที่ต้องการด้วยวิธีการคำนวณ แต่เนื่องจาก Browser แต่ละยี่ห้อ มีวิธีการคำนวณที่ไม่เหมือนกัน ดังนั้นถ้าใช้หน่วยนี้ มันอาจไม่เหมือนกันในทุกบราวเซอร์ได้

% การกำหนดขนาดเป็นเปอร์เซนต์ จะช่วยให้ความยืดหยุ่นกับหน้าเว็บได้ดีครับ ขนาดของเปอร์เซ็นต์ จะได้จากการคำนวณขนาดของ element ที่เป็น parent เช่น

<div style="font-size:10px">
  <p style="font-size:90%">XXX</p>
</div>

div ภายนอก ถือเป็น parent ของ p ซึ่ง div ภายนอกมีขนาดตัวอักษรเป็น 10px และกำหนดให้ p มีขนาดตัวอักษรเป็น 90% ของ div ซึ่งเท่ากับว่า p จะมีขนาดตัวอักษรเท่ากับ 9px นั่นเอง

em หรือ emphasize จะใช้เหมือนกับ % ครับ หน่วย em นี่จะให้ขนาดเป็นจำนวนเท่า และสามารถใช้เป็นทศนิยมได้ เช่น 1em หมายถึงมีขนาดตามปกติ หรือ 0.9em หมายถึงเล็กลง 10% หรือ 0.9em เท่ากับกำหนดด้วย 90% นั่นเอง

การกำหนดเป็น px หรือ pt จะให้ขนาดที่คงที่ เหมาะกับการรักษารูปแบบหรือขนาดให้คงที่หรือเหมือนกันในทุก Browser เหมาะกับการใช้ร่วมกับ CSS เพื่อกำหนดขนาดของ element เช่น

<div style="width:100px"></div>

หรือใช้ในการกำหนดค่าเริ่มต้นของขนาดของตัวอักษร เพื่อให้ทุก element มีขนาดตัวอักษรเท่ากันไว้ก่อน เช่น

* {
  font-size: 13px;
}

ส่วนการกำหนดค่าเป็น % หรือ em เรามักใช้ร่วมกับการกำหนดขนาดของตัวอักษรเป็นหลัก เพื่อให้ user สามารถใช้การปรับขนาดตัวอักษรเพื่อชดเชยการมองเห็นได้ โดยที่ไม่ทำให้เว็บเสียรูปแบบ

โดยความเห็นส่วนตัว ผมไม่แนะนำให้ใช้ขนาดเป็น % หรือ em กับขนาดของ element เพราะถึงแม้ว่ามันจะทำให้เว็บไซต์ยืดหยุ่นหรือปรับขนาดไปตามขนาดจอภาพได้ แต่หากออกแบบเว็บโดยไม่ใช้ตารางแล้วละก็การจัดการจะยากขึ้นอีกพอสมควรเลยทีเดียว