Thuộc tính box-sizing CSS

Định nghĩa và cách sử dụng

Thuộc tính box-sizing cho phép bạn định nghĩa một cách cụ thể cách đối tượng đặc định phù hợp với một khu vực cụ thể.

Ví dụ, nếu bạn cần đặt hai khung cạnh biên song song, bạn có thể đặt box-sizing thành "border-box". Điều này sẽ làm trình duyệt hiển thị khung có chiều rộng và chiều cao đã thiết lập, và đặt viền và lề vào khung.

Xem thêm:

Hướng dẫn CSS3:Giao diện người dùng CSS3

Hướng dẫn tham khảo HTML DOM:boxSizing 属性

Ví dụ

Định nghĩa hai khung cạnh biên song song:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Thử ngay

Có nhiều ví dụ thêm ở cuối trang.

Cú pháp CSS

box-sizing: content-box|border-box|inherit;

Giá trị thuộc tính

Giá trị Mô tả
content-box

Đây là hành vi chiều rộng và chiều cao được quy định bởi CSS2.1.

Chiều rộng và chiều cao được áp dụng riêng biệt cho khung nội dung của phần tử.

Viền và lề của phần tử được vẽ bên ngoài chiều rộng và chiều cao.
border-box

Chiều rộng và chiều cao được thiết lập cho phần tử xác định hộp viền của phần tử.

Nghĩa là, bất kỳ viền và lề nào được chỉ định cho phần tử sẽ được vẽ trong chiều rộng và chiều cao đã thiết lập.

Để lấy được chiều rộng và chiều cao của nội dung, cần trừ đi viền và lề từ chiều rộng và chiều cao đã thiết lập.
inherit Định nghĩa rằng giá trị của thuộc tính box-sizing nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: content-box
Di truyền: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.boxSizing="border-box"

Hỗ trợ trình duyệt

Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu có tiền tố -webkit- hoặc -moz- đại diện cho phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5