CSS Box-Sizing

CSS box-sizing defines how the total width and height of an element are calculated. It determines whether padding and border are included in the element's size.

---

Key Concepts

Value	Description	Total Size Calculation Formula
content-box	Default value. The width and height include only the content. Padding and borders are added outside.	width + padding + border
border-box	Includes content, padding, and border in the specified width and height.	width (including padding + border)

---

Comparison: content-box vs border-box

Feature	content-box	border-box
Width and Height	Only includes the content.	Includes content, padding, and border.
Use Case	Useful for elements where padding and border are added separately.	Useful for more predictable layouts.
Behavior	Adding padding/borders increases the total size.	Adding padding/borders does not change the total size.

---

Example: content-box

.box-content {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
}