Home › Layout & Spacing › Box sizing
Box sizing
How browsers calculate a box's final size.
Box sizing controls what a declared width or height includes. With content-box, width only applies to the content area; padding and border are added on top.
With border-box, width includes content, padding, and border together. A 320px element stays 320px wide even after you add padding or a border.
Most modern interfaces use border-box globally because it makes layout math predictable. You can add padding without accidentally making columns overflow.