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

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;
}

If we use box-sizing: border-box on the child element, the width property sets the width of content, padding and border, 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;
}

Further reading:

• The box model - Learn web development | MDN
• box-sizing - CSS: Cascading Style Sheets | MDN
• Inheriting Box-sizing Probably Slightly Better Best-Practice | CSS-Tricks

Image source: the image used in this post is from The box model - Learn web development | MDN#what_is_the_css_box_model.