CSS box-sizing Property

CSS box-sizing Property

The box-sizing property in CSS defines how the total width and height of an element is calculated, including padding and borders. It helps control the box model, making layout design easier and more predictable.

1. Syntax

selector {
  box-sizing: value;
}

Value	Description
content-box (default)	The default box model. Width and height apply to the content area only. Padding and borders are added to the total width and height.
border-box	Width and height include padding and borders, making the total size of the element equal to the width and height you set.
padding-box	Width and height include padding but not borders (less commonly used).
inherit	Inherits the value from the parent element.

2. Example – Default content-box Model (default behavior)

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

✅ The total width will be 200px + 20px padding + 5px border on each side = 250px total width.
✅ The height will be 100px + 20px padding + 5px border on top and bottom = 150px total height.

3. Example – border-box Model

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

✅ With border-box, the total width remains 200px, and the total height remains 100px (padding and borders are included within these values).

4. Example – padding-box Model

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: padding-box;
}

✅ The width will be 200px, and height will be 100px. However, padding is included in the calculation, but borders are excluded.

5. Best Practices

✔ Use box-sizing: border-box; for a more predictable layout, especially when working with padding and borders. It ensures the total size of the element remains consistent.
✔ The border-box model is especially helpful in responsive design to avoid overflow issues when adding padding or borders.
✔ You can apply box-sizing: border-box globally by adding it to the * selector:

* {
  box-sizing: border-box;
}