CSS box model là gì?

Question

Accepted Answer

Mọi phần tử trong CSS đều là một **box** hình chữ nhật gồm bốn lớp, từ trong ra ngoài: **content**, **padding**, **border**, và **margin**. Hiểu được cách chúng kết hợp với nhau là nền tảng của mọi bố cục (layout).

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

```css
.box {
  width: 200px;      /* chiều rộng của content (trong box model mặc định) */
  padding: 20px;     /* khoảng cách bên trong — đẩy content vào trong */
  border: 5px solid; /* viền hiển thị */
  margin: 10px;      /* khoảng cách bên ngoài — tách khỏi các phần tử lân cận */
}
```

## Cái bẫy kinh điển: tổng chiều rộng

Với box model **mặc định** `box-sizing: content-box`, chiều rộng được render ra *lớn hơn* `width` bạn đặt, vì padding và border được cộng thêm vào:

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

Điều này khiến người mới ngạc nhiên — bạn đặt `width: 200px` nhưng nó chiếm 250px. Cách khắc phục mà ai cũng dùng:

```css
* { box-sizing: border-box; } /* giờ width ĐÃ BAO GỒM padding + border → tổng 200px */
```

## padding vs margin

- **padding** — khoảng cách *bên trong* border; nó là một phần của phần tử (có thể click, nhận màu nền).
- **margin** — khoảng cách *bên ngoài* border; trong suốt, và các margin dọc liền kề sẽ **collapse** (gộp lại, margin lớn hơn trong hai margin chạm nhau sẽ thắng).

## Tại sao điều này quan trọng

Box model quyết định các phần tử thực sự lớn cỡ nào và chúng cách nhau ra sao.

Biết rằng model mặc định cộng padding/border vào `width` (và tại sao `border-box` gần như là cách khắc phục phổ biến) sẽ tránh được sự nhầm lẫn phổ biến nhất về kích thước trong layout.