CSS Box Sizing

The box-sizing property allows us to include the padding and border in an element's total width and height.

The Problem with Default Sizing

By default, if you set width: 300px and then add padding: 20px and a border: 5px, the actual width of the element becomes 350px (300 + 20 + 20 + 5 + 5).

The Solution: border-box

With box-sizing: border-box, the padding and border are included in the width. If you set width: 300px, it stays 300px wide, and the content area shrinks to fit the padding and border inside.

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid green;
}

Best Practice: Universal Reset

Modern web developers almost always apply border-box to every element on the page to make layouts predictable.

* {
    box-sizing: border-box;
}