15. The Importance of Box-Sizing: border-box

By default, the CSS Box Model operates in what is called content-box mode. This default behavior often leads to frustrating layout calculations.

Default Behavior: content-box

In content-box mode (the default), when you set width and height, you are defining the size of the content area only.

If you set:

css .my-box { width: 200px; padding: 10px; /* +20px total horizontal / border: 5px solid black; / +10px total horizontal */ }

The box's actual visible width on the screen will be 200px (content) + 20px (padding) + 10px (border) = 230px.

The Better Behavior: border-box

When you set box-sizing: border-box, the width and height properties define the size of the entire box, including content, padding, and border.

If you set the same properties with border-box:

css .my-box-better { box-sizing: border-box; width: 200px; padding: 10px; border: 5px solid black; }

The box's actual visible width is exactly 200px. The padding and border are contained within that defined width, making layout much more predictable.

The Recommended Global Reset

It is standard professional practice to apply border-box to every element in the stylesheet to avoid complex calculations, often done with the universal selector or a slightly expanded version:

css html { box-sizing: border-box; } *, *::before, ::after { box-sizing: inherit; / Inherit from HTML, making changes easy */ }