CSS Box Sizing

By default, browsers calculate an element’s width and height based only on the content area. Padding and border are added outside of that width, which often makes layouts harder to manage.

The box-sizing property changes this behavior and makes CSS sizing more predictable.

Default Behavior: content-box

  • Default value: content-box
  • Width and height apply only to the content area.
  • Padding and border are added outside, increasing the final rendered size.

Example:

Code Block Loading...

Modern Behavior: border-box

  • Recommended value: border-box
  • Width and height include content + padding + border.
  • Margin is still outside the box.

Example:

Code Block Loading...

Global Reset

It’s common to apply border-box to all elements for predictable layouts:

Code Block Loading...

Interactive Playground

Key Takeaways

  • content-box → width applies only to content (default).
  • border-box → width includes content + padding + border (recommended).
  • margin is always outside the box.
  • Use a global reset (* { box-sizing: border-box; }) for predictable layouts.
  • Interactive experimentation helps learners see why border-box simplifies CSS math.