Box Model

หัวข้อนี้คืออะไร

ในโลกของ CSS มีแนวคิดพื้นฐานที่สำคัญที่สุดอย่างหนึ่ง นั่นคือ "CSS Box Model" ทุก element ที่คุณเห็นในหน้าเว็บ ไม่ว่าจะเป็นหัวข้อ ย่อหน้า รูปภาพ หรือปุ่ม browser จะ render มันในรูปแบบของ "กล่อง" สี่เหลี่ยมเสมอ กล่องนี้ไม่ได้มีแค่ชั้นเดียว แต่ประกอบด้วย 4 ชั้นซ้อนกัน จากในสุดไปนอกสุด

• คอนเทนต์ (Content) คือพื้นที่จริงของเนื้อหา เช่น ข้อความ รูปภาพ หรือ element ลูก
• แพดดิง (Padding) คือช่องว่างระหว่างเนื้อหากับเส้นขอบ อยู่ด้านในกล่อง
• เส้นขอบ (Border) คือขอบที่ล้อมรอบ padding และ content
• มาร์จิน (Margin) คือช่องว่างด้านนอกกล่อง ระหว่างกล่องกับ element อื่น

ทำไมหัวข้อนี้จึงสำคัญ

CSS Box Model คือรากฐานของการจัด layout หน้าเว็บทั้งหมด ถ้าคุณยังไม่เข้าใจ Box Model คุณจะพบปัญหาเหล่านี้บ่อยมาก: กำหนด width ไว้แล้ว element ดูใหญ่กว่านั้น, อยากให้ element ห่างจาก element อื่นแต่ไม่รู้ว่าควรใช้ padding หรือ margin, หรือเพิ่ม padding แล้ว layout ขยายเกินที่คิดไว้ การเข้าใจ Box Model อย่างถ่องแท้ตั้งแต่ต้น จะทำให้คุณคำนวณขนาด element ได้ถูกต้อง วางระยะห่างได้แม่นยำ และต่อยอดไปยัง Flexbox, Grid และ Responsive Design ได้มั่นใจกว่าเดิม

ตัวอย่างจากชีวิตจริง

ลองนึกภาพ "กล่องสินค้าพัสดุ" ที่ส่งทางไปรษณีย์ กล่องนี้มีโครงสร้างที่ตรงกับ CSS Box Model ทุกอย่าง Content คือของที่อยู่ข้างใน เช่น โทรศัพท์มือถือที่อยู่ในกล่อง นี่คือเนื้อหาจริงของกล่อง Padding คือโฟมกันกระแทกรอบของ เป็นระยะห่างระหว่างโทรศัพท์กับขอบกล่องโดยตรง Padding อยู่ด้านในกล่อง และมีสีพื้นหลังเดียวกับกล่อง Border คือผนังกล่องกระดาษที่ล้อมรอบทั้ง content และ padding Margin คือระยะห่างระหว่างกล่องใบนี้กับกล่องใบอื่นบนชั้นวาง Margin ไม่ได้อยู่ในกล่อง แต่อยู่ด้านนอก และเป็นพื้นที่โปร่งใส

แนวคิดหลักที่ต้องเข้าใจ

Browser จะ render element ทุกตัวเป็นกล่องสี่เหลี่ยมเสมอ กล่องนี้มี 4 ชั้นซ้อนกันจากในสุดไปนอกสุด

CSS Box Model: Content -> Padding -> Border -> Margin เรียงซ้อนจากในสุดไปนอกสุด

• Content Area คือพื้นที่ตรงกลางที่สุด ใช้แสดงข้อความ รูปภาพ หรือ element ลูก ขนาดถูกควบคุมด้วย width และ height
• Padding ล้อมรอบ content area มีพื้นหลังสีเดียวกับกล่อง ใช้เพิ่มช่องว่างระหว่างเนื้อหากับขอบ
• Border ล้อมรอบ padding สามารถกำหนดความหนา สไตล์ และสีได้
• Margin เป็นชั้นนอกสุด โปร่งใส ไม่มีพื้นหลัง ใช้ดันกล่องออกห่างจาก element อื่น

การทำงานทีละขั้นตอน

เมื่อคุณเขียน CSS กำหนดค่าต่าง ๆ browser จะคำนวณพื้นที่ของ element ตามลำดับนี้

• 1. Browser อ่าน HTML และสร้าง element เริ่มต้นด้วยกล่องว่าง ๆ
• 2. คำนวณ Content Area จาก width, height หรือขนาดเนื้อหาจริงถ้าไม่ได้กำหนด
• 3. เพิ่ม Padding รอบ Content ทำให้พื้นที่ภายในกล่องขยายออกไป
• 4. เพิ่ม Border รอบ Padding ทำให้ขนาดที่มองเห็นใหญ่ขึ้นอีก
• 5. เพิ่ม Margin ด้านนอกสุดเพื่อดัน element อื่นออกห่าง
• 6. พื้นที่ทั้งหมดที่ element กินคือ content + padding + border + margin แต่ margin ไม่ใช่ส่วนหนึ่งของขนาดที่มองเห็น

ตัวอย่างเชิงเทคนิค

ดูตัวอย่างนี้: กล่องที่กำหนดค่าครบทั้ง 4 ส่วน

<!-- HTML -->
<div class="box">สวัสดี CSS Box Model</div>

/* CSS */
.box {
  width: 200px;       /* ความกว้างของ Content Area */
  height: 80px;       /* ความสูงของ Content Area */

  padding: 20px;      /* ช่องว่างด้านในทุกด้าน = 20px */
  border: 4px solid #3b82f6;
  margin: 30px;       /* ระยะห่างด้านนอกทุกด้าน = 30px */

  background: #bfdbfe;
}

ลองดูความแตกต่างระหว่าง Padding กับ Margin

แก้ไข CSS ด้านล่างเพื่อดูว่า padding กับ margin ให้ผลต่างกันอย่างไร กล่อง A ใช้ padding ช่องว่างจึงอยู่ด้านในกล่อง และพื้นหลังสีฟ้าครอบคลุมถึง padding กล่อง B ใช้ margin ช่องว่างจึงอยู่ด้านนอกกล่อง และดันกล่องออกห่างจากสิ่งรอบข้าง

จุดที่ผู้เริ่มต้นมักสับสน

นี่คือความเข้าใจผิดที่พบบ่อยที่สุด ตรวจสอบว่าคุณเข้าใจถูกต้องหรือยัง

• Padding คือช่องว่างด้านใน ระหว่าง content กับ border ส่วน Margin คือช่องว่างด้านนอก ระหว่าง element กับ element อื่น
• Border ไม่ได้อยู่ข้างใน content แต่ล้อมรอบ padding อีกชั้นหนึ่ง ลำดับคือ content -> padding -> border -> margin เสมอ
• ค่า width ปกติกำหนดแค่ content area ดังนั้น padding และ border จะถูกบวกเพิ่มด้านนอก เว้นแต่ใช้ box-sizing: border-box
• Background color ครอบคลุม content และ padding แต่ไม่รวม margin
• Margin เป็นพื้นที่โปร่งใส และสามารถมีค่าติดลบได้ แต่ padding มีค่าต่ำสุดคือ 0

เปรียบเทียบ Padding กับ Margin

สรุปความแตกต่างหลัก ๆ ในตารางเดียว

สรุปท้ายบท

"กล่อง CSS ทุกกล่องมี 4 ชั้น จากในสุดไปนอกสุด: Content -> Padding -> Border -> Margin"

• Content คือเนื้อหาด้านใน ขนาดกำหนดด้วย width และ height
• Padding คือระยะห่างด้านใน มีพื้นหลังเหมือนกล่อง
• Border คือเส้นขอบของกล่อง กำหนดความหนา สไตล์ และสีได้
• Margin คือระยะห่างด้านนอก โปร่งใสเสมอ
• ขนาดที่มองเห็น = content + padding + border ส่วน margin ไม่นับ
• ใช้ box-sizing: border-box เพื่อให้ width รวม padding และ border ด้วย ซึ่งจะเรียนในบทต่อไป

ทดลองปรับ Box Model แบบเห็นผลทันที

ใช้ demo นี้เพื่อดูความต่างของ Content, Padding, Border และ Margin พร้อมกัน กล่อง A คือกล่องที่ปรับค่าได้ ส่วนกล่อง B เป็นกล่องข้าง ๆ ที่ช่วยให้เห็นว่า margin ส่งผลกับระยะห่างระหว่าง element อย่างไร

Lab 1: รู้จักส่วนประกอบของกล่อง

เป้าหมาย: ฝึกเพิ่ม padding, border และ margin ให้ element เดียว โจทย์: 1. เพิ่ม padding: 20px เพื่อเพิ่มช่องว่างด้านในทุกด้าน 2. เพิ่ม border: 3px solid #333 เพื่อเพิ่มเส้นขอบสีเข้ม 3. เพิ่ม margin: 30px เพื่อเพิ่มระยะห่างด้านนอก

Lab 2: แยก Padding กับ Margin ให้ถูกที่

เป้าหมาย: ฝึกใช้ padding และ margin ให้ถูก element และถูก property โจทย์: - .inner-box ต้องการช่องว่างด้านใน ให้เพิ่ม padding: 24px - .outer-box ต้องการระยะห่างด้านนอก ให้เพิ่ม margin: 40px เงื่อนไข: ห้ามสลับกัน padding ต้องอยู่ใน .inner-box และ margin ต้องอยู่ใน .outer-box

Lab 3: ประกอบกล่องแจ้งเตือนด้วยระยะห่าง

เป้าหมาย: ฝึกเลือกใช้ padding, border และ margin ในสถานการณ์เดียวกันโดยไม่ใช้ความรู้จากบทถัดไป โจทย์: 1. เพิ่ม padding: 16px ให้ .notice เพื่อสร้างช่องว่างด้านใน 2. เพิ่ม border: 2px solid #2563eb ให้ .notice เพื่อทำกรอบ 3. เพิ่ม margin: 24px ให้ .notice เพื่อเว้นระยะด้านนอก เงื่อนไข: ใช้เฉพาะ padding, border และ margin ตามที่เรียนในบทนี้