box-sizing in CSS: How Width and Height Are Calculated

Cyrus Yip
Sep 24, 2024

In CSS, a block element is a box (rectangle) made up of four parts: content, padding, border, and margin. box-sizing determines how total width and height of an element is calculated.

By default (box-sizing: content-box;), the width property only sets the width of content, which is very unintuitive. When you set width: 100% and border to a element, it becomes wider than the parent element and its border extends beyond the parent element.

1
2
3
<div class="container">Parent
  <div class="child">Child</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.container {
  width: 100px;
  height: 100px;
  outline: 1px solid green;
}
.child {
  width: 100%;
  border: 10px solid blue;
  box-sizing: content-box;
}

When we use box-sizing: border-box on the child element, the width property sets the width of content, padding and margin, so the child element won’t be wider than the parent element.

It’s recommended to set border-box to all elements to avoid pitfalls about width and height.

1
2
3
*, *::before, *::after {
  box-sizing: border-box;
}