CSS Box Sizing

CSS Box Sizing

CSS box-sizing Thuộc tính cho phép chúng ta bao gồm lề trong (độ dày) và viền trong tổng chiều rộng và chiều cao của phần tử.

Nếu không chỉ định thuộc tính CSS box-sizing

Mặc định, chiều rộng và chiều cao của phần tử được tính như sau:

  • width + padding + border = chiều rộng thực tế của phần tử
  • height + padding + border = chiều cao thực tế của phần tử

Điều này có nghĩa là: Khi bạn đặt chiều rộng/chiều cao của phần tử, phần tử thường trông lớn hơn (vì viền và lề trong đã được thêm vào chiều rộng/chiều cao được chỉ định của phần tử).

Hình ảnh sau đây hiển thị hai phần tử <div> có cùng chiều rộng và chiều cao được chỉ định:

Div này nhỏ hơn
（chiều rộng là 300px, chiều cao là 100px）。
Div này lớn hơn
（chiều rộng cũng là 300px, chiều cao là 100px）。

Hai phần tử <div> trên được hiển thị với kích thước khác nhau trong kết quả cuối cùng (vì div2 đã chỉ định lề trong):

Mẫu

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Thử ngay

box-sizing Thuộc tính giải quyết vấn đề này.

Nếu sử dụng thuộc tính CSS box-sizing

box-sizing Thuộc tính cho phép chúng ta bao gồm lề trong và viền trong tổng chiều rộng và chiều cao của phần tử.

Nếu đã đặt box-sizing: border-box;Nên chiều rộng và chiều cao sẽ bao gồm lề trong và viền:

Bây giờ hai div có kích thước tương tự nhau!
Hooray!

Ví dụ này tương tự như ví dụ trước, hai phần tử <div> đều được đặt box-sizing: border-box;：

Mẫu

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Thử ngay

Do vì sử dụng box-sizing: border-box; hiệu quả đến mức nhiều nhà phát triển hy vọng rằng tất cả các phần tử trên trang web đều có thể hoạt động theo cách này.

Mã dưới đây có thể đảm bảo điều chỉnh kích thước của tất cả các phần tử theo cách trực quan hơn. Nhiều trình duyệt đã sử dụng hiệu quả box-sizing: border-box;（Nhưng không phải tất cả - đó là lý do tại sao input và textarea trông khác nhau khi width: 100%;）。

Áp dụng cho tất cả các phần tử là an toàn và thông minh:

Mẫu

* {
  box-sizing: border-box;
}

Thử ngay

Thuộc tính CSS Box Sizing

Thuộc tính Mô tả
box-sizing Định nghĩa cách tính chiều rộng và chiều cao của phần tử: chúng có nên bao gồm lề trong (padding) và viền (border) hay không?