CSS Box Sizing
The box-sizing property allows you to define how the width and height of an element are calculated: should they include padding and borders, or not?
Content-Box (Default)
By default, CSS sets box-sizing: content-box. In this mode, if you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any padding or border will be added to that final width, making the element wider than 100px.
Border-Box (The Fix)
box-sizing: border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border and padding you added, and the content box will shrink to absorb that extra width.
Best Practices
Most modern web developers find border-box easier to reason about. It is common to apply this setting to all elements using the universal selector:
box-sizing: border-box;
}