reveal.js

# Box Model

หัวข้อ 1 · CSS แผ่นแบบต่อเรียงและการออกแบบเว็บ

---

## แนวคิดหลัก

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

---

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

```text
margin
  border
    padding
      content
```

---

## Content Box

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

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

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

---

## Padding

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

```css
.card {
  padding: 16px;
}
```

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

---

## Border

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

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

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

---

## Margin

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

```css
.card {
  margin-bottom: 24px;
}
```

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

---

## `box-sizing`

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

### `content-box`

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

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

### `border-box`

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

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

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

```css
*, *::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 อย่างไร

---

## จบบทเรียน

<a href="/web-programming/03-css-design/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>