CSS box-sizing

Subject: css

CSS box-sizing

The box-sizing property in CSS defines how the total width and height of an element are calculated. It determines whether padding and border are included inside the element's declared dimensions or added outside.

Understanding box-sizing is key for avoiding unexpected layout issues, especially when dealing with responsive or complex component designs.

Why Use box-sizing?

  • Prevent layout breakage from padding and borders
  • Simplify sizing math in the box model
  • Ensure consistent element dimensions
  • Useful in frameworks and responsive designs

Box Model Recap

By default, CSS uses the content-box model:

🚀 Try it in Compiler

With box-sizing: border-box, padding and border are included within the specified width and height:

🚀 Try it in Compiler

Syntax

🚀 Try it in Compiler

Example: Comparing content-box vs border-box

🚀 Try it in Compiler

Explanation

  • Left box (content-box): Final size = 200px (width) + 20px padding + 5px border (on each side)
  • Right box (border-box): Final size = exactly 200px including padding and border

Global Reset with border-box

It's common to apply box-sizing: border-box globally:

🚀 Try it in Compiler

This ensures that all elements behave consistently.

Best Practices

  • Use border-box for predictable and consistent sizing
  • Apply it globally using a CSS reset
  • Avoid mixing content-box and border-box in the same layout unless needed
  • Works well with flexbox, grid, and fluid layouts

Browser Support

Fully supported in all major browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 8+

Key Takeaways

  • box-sizing controls how width and height are calculated
  • border-box includes padding and border inside the set dimensions
  • Greatly improves layout consistency and simplicity
  • Recommended to use globally via CSS reset
Next: CSS Max Width