Thuộc tính CSS box-sizing kiểm soát cách tính toán kích thước của một phần tử. Khi sử dụng mô hình border-box, padding và border được tính vào tổng chiều rộng và chiều cao của phần tử. Điều này giúp việc quản lý bố cục trở nên dễ dàng hơn.
Syntax
box-sizing: content-box | border-box;
Property Values
Dưới đây là mô tả các giá trị thuộc tính cho thuộc tính box-sizing:
Property Value | Description |
|---|---|
content-box | Chiều rộng và chiều cao của phần tử được tính không bao gồm padding và border. Padding và border được thêm vào bên ngoài chiều rộng và chiều cao đã chỉ định. |
border-box | Chiều rộng và chiều cao của phần tử bao gồm padding và border trong kích thước đã chỉ định. Điều này giúp tính toán bố cục đơn giản và dễ đoán hơn. |
Dưới đây là định nghĩa và cú pháp cho cả hai giá trị thuộc tính:
content-box
Giá trị content-box cho box-sizing tính toán chiều rộng và chiều cao của một phần tử. Việc tính toán này không bao gồm padding và border. Chúng sẽ được thêm vào kích thước đã chỉ định.
Syntax:
box-sizing: content-box;
Example: Ví dụ này minh họa việc sử dụng box-sizing với giá trị được đặt thành content-box.
HTML<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 200px;
height: 60px;
padding: 20px;
border: 2px solid green;
background: green;
color: white;
}
.content-box {
box-sizing: content-box;
}
</style>
</head>
<body style="text-align: center;">
<h2>box-sizing: content-box</h2>
<br>
<div class="content-box">GeeksforGeeks</div>
</body>
</html>
Output:
border-box
Giá trị border-box cho box-sizing tính toán chiều rộng và chiều cao của một phần tử. Việc tính toán này bao gồm padding và border trong kích thước đã chỉ định. Điều này giúp thiết kế bố cục đơn giản và dễ đoán hơn.
Syntax:
box-sizing: border-box;
Example: Ví dụ này minh họa việc sử dụng thuộc tính box-sizing với giá trị được đặt thành border-box.
HTML<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 200px;
height: 60px;
padding: 20px;
border: 2px solid green;
background: green;
color: white;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body style="text-align: center;">
<h2>box-sizing: border-box</h2>
<br>
<div class="border-box">GeeksforGeeks</div>
</body>
</html>
Output:
Supported Browsers
Các trình duyệt được hỗ trợ bởi thuộc tính box-sizing được liệt kê dưới đây:
Note: Thuộc tính box-sizing được hỗ trợ rộng rãi trên tất cả các trình duyệt hiện đại. Bạn có thể sử dụng nó một cách an toàn trong hầu hết các dự án web. Điều này đảm bảo tính tương thích trên các nền tảng và thiết bị khác nhau mà không cần các giải pháp dự phòng đặc biệt.