หัวข้อ 1: Box Model

แนวคิดหลัก

ทุก element บนหน้าเว็บถูกมองเป็นกล่อง กล่องหนึ่งประกอบด้วย content, padding, border และ margin การเข้าใจ Box Model จะช่วยให้ควบคุมขนาด ระยะห่าง และการจัดวาง element ได้แม่นยำ

ส่วนประกอบของ Box Model

margin
  border
    padding
      content

Content Box

Content Box คือพื้นที่เนื้อหาจริง เช่น ข้อความ รูปภาพ หรือองค์ประกอบภายใน กำหนดได้ด้วย width และ height

.box {
  width: 240px;
  height: 120px;
}

เมื่อใช้ค่า default box-sizing: content-box ความกว้าง 240px จะนับเฉพาะ content ไม่รวม padding และ border

Padding

Padding คือช่องว่างระหว่างเนื้อหาและ border เป็นช่องว่างภายในกล่อง

.card {
  padding: 16px;
}

Padding ช่วยให้เนื้อหาไม่ติดขอบ ทำให้ UI อ่านง่ายขึ้น

Border

Border คือเส้นกรอบของ element สามารถกำหนด style, width และ color ได้

.card {
  border: 1px solid #d0d0d0;
}

ตัวอย่าง style ที่ใช้ได้ เช่น solid, dashed, dotted, double

Margin

Margin คือช่องว่างภายนอก border ใช้เว้นระยะระหว่าง element

.card {
  margin-bottom: 24px;
}

Margin ไม่ใช่พื้นที่ภายใน element แต่เป็นระยะห่างระหว่างกล่องกับสิ่งรอบข้าง

box-sizing

box-sizing กำหนดวิธีคำนวณขนาดกล่อง

content-box

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

ความกว้างจริง = 200 + 40 + 4 = 244px

border-box

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
}

ความกว้างจริงยังเป็น 200px โดยรวม content, padding และ border แล้ว

แนะนำให้ตั้งค่าพื้นฐาน:

*, *::before, *::after {
  box-sizing: border-box;
}

Debug Box Model ด้วย Browser DevTools

ใน DevTools แท็บ Elements สามารถเลือก element แล้วดู Box Model ได้ใน panel Styles หรือ Computed เพื่อดูขนาด content, padding, border และ margin จริง

ขั้นตอน:

1. คลิกขวาที่ element แล้วเลือก Inspect
2. เปิดแท็บ Computed
3. ดูแผนภาพ Box Model
4. ทดลองปรับ margin/padding ชั่วคราวใน DevTools

กิจกรรม

สร้างกล่อง .profile-card ที่มี width, padding, border, margin และทดลองเปลี่ยน box-sizing ระหว่าง content-box กับ border-box

แบบทดสอบหลังเรียน

1. Padding และ margin ต่างกันอย่างไร
2. Border กำหนดค่าอะไรได้บ้าง
3. box-sizing: border-box มีข้อดีอย่างไร
4. เพราะเหตุใดขนาด element อาจใหญ่กว่า width ที่กำหนด
5. DevTools ช่วย debug Box Model อย่างไร

กลับสัปดาห์ที่ 3