What does box-sizing: border-box mean?

border-box

box-sizing: border-box is a CSS property that changes how the total width and height of an element are calculated.

By default, an element's specified width and height only apply to its content area. When you add padding or border, the total size of the element increases. With box-sizing: border-box, the specified width and height instead include the content, padding, and border.

/* Default box-sizing (content-box) */
.default-box {
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  /* Actual total width will be 260px (200 + 20*2 + 10*2) */
}

/* Border-box */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  /* Total width remains 200px */
}

This makes layout calculations much easier, especially when creating responsive designs or working with grids. It's so useful that many developers apply it globally:

* {
  box-sizing: border-box;
}

This ensures all elements use the border-box model, simplifying CSS layout and preventing unexpected sizing issues.