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

Question

IT Interview Practice · 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.

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

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

Reset phổ biến

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

Câu hỏi liên quan