การใช้งาน CSS Box Model

CSS Box Model คือหนึ่งในแนวคิดพื้นฐานที่สุดของการออกแบบเว็บไซต์ด้วย CSS ซึ่งใช้กำหนดลักษณะของการจัดวางองค์ประกอบต่างๆ ในหน้าเว็บ โดยอธิบายถึงพื้นที่ขององค์ประกอบแต่ละชิ้นว่าแบ่งออกเป็นส่วนต่างๆ อย่างไร

โครงสร้างของ CSS Box Model ประกอบไปด้วย 4 ส่วนหลัก ๆ

Content (เนื้อหา)

• เป็นส่วนที่บรรจุเนื้อหาจริง ๆ ขององค์ประกอบ ไม่ว่าจะเป็นข้อความ รูปภาพ หรือเนื้อหาอื่นๆ ขนาดของส่วนนี้จะถูกกำหนดโดย width และ height ขององค์ประกอบ

ตัวอย่าง

div {
  width: 200px;
  height: 100px;
}

Padding (ช่องว่างระหว่างเนื้อหาและขอบ)

• เป็นพื้นที่ระหว่างเนื้อหากับขอบขององค์ประกอบ กำหนดช่องว่างภายในขององค์ประกอบ (ยิ่งค่า padding มากขึ้น เนื้อหาจะยิ่งห่างจากขอบมากขึ้น)

• สามารถกำหนด padding ให้เฉพาะด้านใดด้านหนึ่งได้ เช่น padding-top, padding-right, padding-bottom, และ padding-left

ตัวอย่าง

div {
  padding: 20px;
}

Border (ขอบ)

• เป็นเส้นขอบขององค์ประกอบที่อยู่ระหว่าง padding และ margin ขอบนี้สามารถกำหนดความหนา สี และรูปแบบได้ตามต้องการ เช่น border-width, border-style, และ border-color

ตัวอย่าง

div {
  border: 2px solid black;
}

Margin (ระยะห่างภายนอกระหว่างองค์ประกอบ)

• เป็นพื้นที่ว่างภายนอกสุดขององค์ประกอบที่แยกองค์ประกอบนั้นออกจากองค์ประกอบอื่น ๆ (จะไม่มีสีหรือขอบ) สามารถกำหนดระยะห่างได้ทั้ง 4 ด้านเช่นเดียวกับ padding เช่น margin-top, margin-right, margin-bottom, และ margin-left

ตัวอย่าง

div {
  margin: 10px;
}

การทำงานของ CSS Box Model

เมื่อเราใช้ CSS เพื่อออกแบบองค์ประกอบในหน้าเว็บ แต่ละองค์ประกอบจะถูกตีความตาม Box Model นี้ ตัวอย่างเช่น

• ถ้ากำหนด width: 200px และมี padding: 10px และ border: 2px แล้ว Box Model จะมีขนาดที่แท้จริงตามนี้
  • เนื้อหาหลัก (content) = 200px
  • Padding (ด้านซ้าย + ขวา) = 20px
  • Border (ด้านซ้าย + ขวา) = 4px
  • ขนาดจริงทั้งหมดขององค์ประกอบจะเป็น: 224px (200 + 10 + 10 + 2 + 2)

เพื่อความเข้าใจมากขึ้น เราสามารถใช้ box-sizing เพื่อควบคุมการคำนวณขนาดของ Box Model

• ค่าปกติ (box-sizing: content-box) จะคำนวณขนาดของเนื้อหาแยกจาก padding และ border
• ค่าที่นิยมใช้มากขึ้น (box-sizing: border-box) จะรวม padding และ border ไว้ใน width และ height ที่กำหนดไว้แล้ว ทำให้ง่ายต่อการควบคุมขนาดทั้งหมดขององค์ประกอบ

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

ในกรณีนี้ ขนาดขององค์ประกอบจะคงอยู่ที่ 200px รวมทั้ง padding และ border ไว้ด้วย

สรุป

CSS Box Model ช่วยให้เราสามารถควบคุมพื้นที่และการจัดวางขององค์ประกอบต่างๆ ในหน้าเว็บได้อย่างมีประสิทธิภาพ การเข้าใจ Box Model จะทำให้ออกแบบและปรับแต่งเลย์เอาท์ได้สะดวกยิ่งขึ้น