CSS box model คืออะไร?

Question

Accepted Answer

ทุกองค์ประกอบใน CSS เป็นกล่อง **box** สี่เหลี่ยมผืนผ้าที่ประกอบด้วยสี่ชั้น จากด้านในออกมา: **content**, **padding**, **border** และ **margin** การเข้าใจว่าพวกมันรวมกันอย่างไรคือรากฐานของเลย์เอาต์ทั้งหมด

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## ปัญหาคลาสสิก: ความกว้างทั้งหมด

ด้วย **ค่าเริ่มต้น** `box-sizing: content-box` ความกว้างที่แสดงผล *มากกว่า* `width` ที่คุณตั้งค่า เพราะ padding และ border ถูกเพิ่มไปด้านบน:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

สิ่งนี้ทำให้ผู้เริ่มต้นประหลาดใจ — คุณตั้ง `width: 200px` แต่มันจะใช้พื้นที่ 250px วิธีแก้ไขที่ทุกคนใช้:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — ช่องว่าง *ภายใน* ขอบเขต; เป็นส่วนหนึ่งขององค์ประกอบ (คลิกได้ รับสีพื้นหลัง).
- **margin** — ช่องว่าง *นอก* ขอบเขต; โปร่งใส และ margin แนวตั้งที่อยู่ติดกัน **พังทลาย** (margin ที่อยู่ติดกันในสองตัวที่ใหญ่กว่าจะชนะ).

## ทำไมจึงสำคัญ

Box model ควบคุมว่าองค์ประกอบมีขนาดใหญ่เท่าไรจริงๆ และว่าพวกมันห่างกันแค่ไหน

การรู้ว่าโมเดลค่าเริ่มต้นเพิ่ม padding/border ไปยัง `width` (และเหตุใด `border-box` เป็นการแก้ไขที่แทบทั่วไป) ป้องกันความสับสนเกี่ยวกับขนาดเลย์เอาต์ที่พบได้บ่อยที่สุด