box-sizing: border-box làm gì?

Question

Accepted Answer

`box-sizing` điều khiển **những gì mà thuộc tính `width` và `height` thực sự đo**. Mặc định (`content-box`) chỉ đo content; `border-box` làm chúng bao gồm cả padding và border.

## Vấn đề với mặc định (content-box)

```css
.box {
  box-sizing: content-box; /* mặc định */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Width được render = 200 + 2×20 + 2×5 = 250px  ← lớn hơn bạn yêu cầu! */
```

Với `content-box`, padding và border được **cộng thêm** vào `width`, nên phần tử rốt cuộc rộng hơn con số bạn đặt. Điều này phá vỡ layout: một box `width: 50%` có padding sẽ tràn ra ngoài 50% của nó.

## Cách khắc phục: border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Width được render = TỔNG 200px. Content co lại còn 150px để nhường chỗ. */
```

Với `border-box`, `width` là chiều rộng render **cuối cùng** — padding và border được trừ vào từ bên trong. Con số bạn đặt là kích thước bạn nhận được, trực quan hơn nhiều.

## Reset phổ biến

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

Gần như mọi stylesheet, framework, và reset hiện đại đều áp dụng điều này toàn cục. Nó làm cho việc tính kích thước dễ đoán: `width: 50%` + padding vẫn đúng 50%, hai box `width: 50%` nằm cạnh nhau mà không tràn, v.v.

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

`border-box` loại bỏ nguồn gốc phổ biến nhất của những cơn đau đầu về tính toán layout — phải tự cộng padding và border vào mọi chiều rộng.

Đặt nó toàn cục được coi là một best-practice mặc định, vì "chiều rộng tôi đặt là chiều rộng tôi nhận" là cách bạn tự nhiên kỳ vọng việc tính kích thước hoạt động.