Box-Sizing: Content-Box vs Border-Box

By default, CSS sets width on the content area only. Adding padding or border increases the element's actual rendered size, which is confusing and error-prone.

box-sizing: content-box is the default. width and height apply to the content only. Padding and border are added on top, growing the element beyond the set size.

With box-sizing: border-box, width and height include content + padding + border. The element stays exactly the declared size regardless of padding or border.

Apply border-box globally using the universally recommended reset:

An alternative pattern allows components to override box-sizing if needed:

The main practical benefit of border-box is with percentage widths. A width: 50% element with 20px padding stays at exactly 50% of its parent without overflow.

Even with border-box, margin is not included in the declared width. Margins always add space outside the element on top of its set dimensions.

Historically browsers disagreed on the box model. The W3C standardized content-box but IE used border-box. Modern CSS defaults to content-box for W3C compliance, but virtually all projects override it to border-box.

In Chrome DevTools, the Elements panel shows a box model diagram with exact content, padding, border, and margin dimensions. This is the fastest way to debug sizing issues.

CSS Grid and Flexbox always size tracks and items using border-box semantics, regardless of the element's own box-sizing setting. This keeps their sizing math predictable.

min-width, max-width, min-height, and max-height work the same way as width — they include padding and border when border-box is active.

box-sizing: border-box includes padding and border in the declared width, preventing unexpected size growth. Apply it globally with *, *::before, *::after { box-sizing: border-box }. Margins are never included in either box model.