CSS Box Sizing

500px wide Div with additional Border and Padding

The Box Model adds the borders and padding spacing to the inside of the element.

Left border (5px) + left padding (20px) + content width (500px) + right padding (20px) + right border (5px) = Element Width (550px)

Content

500px wide Div with additional Border and Padding & Box Sizing

With box-sizing: border-box; the applied width (and/or height) you set is what the browser renders. This saves us from having to do the math calculations to achieve the true element's width or height.

Content

Universal Box Sizing

Apply the box sizing property to all the elements on the page.

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