box-sizing Explained

The box-sizing property controls whether width and height apply to the content box alone or to the entire visible box including padding and border.

content-box (default)

Width and height size only the content area. Padding and border are added on top. A 200 px element with 20 px padding becomes 240 px wide — surprising for most developers.

border-box

Width and height size the element including padding and border. The content area shrinks to absorb them. This matches how most designers think about element sizing.

Universal Reset

The modern best practice is to set box-sizing: border-box globally using the inherit trick so component libraries can override it safely.

Example

/* Universal border-box reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/*
  Inheritable version — safer for third-party components:
*/
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* Example: two columns that always total 100% */
.col {
    width: 50%;
    padding: 1rem;     /* with content-box this would overflow */
    float: left;       /* border-box keeps them at exactly 50% */
}

/* Input that fits its container exactly */
input[type="text"] {
    width: 100%;
    padding: 8px 12px; /* no overflow because border-box */
    border: 2px solid #9e9e9e;
    border-radius: 4px;
}

CSS

Full Editor

Pro Tip

Add box-sizing: border-box as the very first thing in every project — fixing sizing surprises retroactively is much harder than starting with a consistent model from the beginning.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned