Thuộc tính box-sizing

Thuộc tính box-sizing cho phép thay đổi cách tính kích thước của phần tử.

Theo mặc định, việc thêm padding sẽ mở rộng phần tử: nếu chúng ta đặt chiều rộng width là 100px và padding-left là 20px, thì chiều rộng thực tế của phần tử sẽ là 120px.

Và nếu chúng ta đặt thêm border-left là 10px, thì chiều rộng thực tế của phần tử sẽ trở thành 130px. Tức là padding và border mở rộng khối (cả chiều rộng lẫn chiều cao). Hành vi này có thể thay đổi bằng cách sử dụng box-sizing.

Cú pháp

bộ chọn {
	box-sizing: content-box | border-box;
}

Giá trị

Giá trị	Mô tả
`content-box`	Cả `padding` lẫn `border` đều mở rộng khối.
`border-box`	Không có `padding` hay `border` nào mở rộng khối.

Giá trị mặc định: content-box.

Ví dụ . Hành vi tiêu chuẩn

Hiện tại cả hai khối có cùng chiều cao và chiều rộng, tuy nhiên khối thứ hai có padding được đặt, còn khối thứ nhất thì không. Hãy xem sự khác biệt về kích thước của chúng:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Ví dụ . Hành vi tiêu chuẩn

Hiện tại cả hai khối có cùng chiều cao và chiều rộng, tuy nhiên khối thứ hai có đường viền được đặt là 10px, còn khối thứ nhất thì không. Hãy xem, sự khác biệt về kích thước của chúng:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Ví dụ . Hành vi tiêu chuẩn

Hiện tại khối thứ hai có cả padding lẫn đường viền là 10px:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Ví dụ . Giá trị border-box

Hãy thêm giá trị border-box cho thuộc tính box-sizing vào phần tử thứ hai. Bây giờ kích thước của cả phần tử thứ nhất và thứ hai sẽ trở nên giống nhau:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Xem thêm

thuộc tính outline,
tạo đường viền không mở rộng phần tử