CSS Box Model ตอนที่ 1

CSS Box Model คืออะไร?

หลายๆ คน คงงง กับคำถามนี้ หรือบางคนอาจจะเคยรู้จักมาแล้วบ้าง
CSS Box Model คือการทำงานของ Browser ใช้ในการสร้างส่วนประกอบของ HTML ที่เราใช้ในหน้า web site ต่างๆ ตามปกติแล้ว Browser จะสร้างส่วนประกอบต่างๆ เป็นกล่องสี่เหลี่ยม (Box Model) และจัดเรียงกล่องต่างๆเหล่านี้ ตามส่วนประกอบของ HTML / CSS ที่เรากำหนด

จากภาพด้านบน ผมได้สร้าง <div> ไว้ภายใต้ <body> และกำหนดให้ border มีเส้นสีแดง (จะแนะนำส่วนของ code ไว้ในลำดับต่อไป) โดยจะเห็นได้ว่า มีเส้นกรอบสี่เหลี่ยมทั้งหมด 3 กรอบด้วยกัน (html, body, div ตามลำดับจากนอกเข้าใน)
สรุปง่ายๆเลยว่า ทุก html tag ที่เรามีใน html file จะถูกแปลมาเป็นกล่องสี่เหลี่ยม (Box Model) เดี๋ยวมาลองดูตัวอย่างจาก website จริงๆบ้างดีกว่า

จากรูปข้างบน ผมเอามาจาก blog นี้เองครับ Text Editor สำหรับ นักพัฒนา (Developer) ก็จะเห็นได้ว่า html tag เป็น กล่องสี่เหลี่ยมหมดเหมือนกัน ไม่มีข้อยกเว้นครับ

HTML / CSS กับ Box Model

HTML Tag ที่จะใช้เป็น Container เช่น DIV, SPAN, DT
CSS: width ใช้ในการบอกขนาดของกล่อง
CSS: padding ใช้กำหนดระยะห่างระหว่าง ขอบของกล่อง (border) กับเนื้อกหาที่อยู่ภายในกล่อง
CSS: border ใช้กำหนดขนาดของเส้นขอบ
CSS: margin ใช้กำหนดระยะห่างระหว่างกล่องนี้กับกล่องข้างๆ

ตอนนี้เอาคร่าวๆก่อนนะครับ เดี๋ยวจะมาต่อในรายละเอียดในบทความต่อไปครับ

* ผมขอออกตัวก่อนนะครับ ว่าผมไม่ได้เก่งกาจอะไร เพียงแต่ขอนำเสนอเท่านั้นเอง

eCommerce Business and IT