By default, margin, padding & border adds together to calculate the total width or height of an element.
The actual width of an element is calculated as –
Similarly, by default, the actual height of an element is calculated as –
Example without box-sizing: border-box
CSS box-sizing: border-box
The example shown above concludes that the actual width/height of the element is greater than or equal to the width/height you set for the element so the element which you define looks bigger than the length you set by default.
Now, if you want to set the length of your element exactly the same size as you defined, you should code box-sizing:border-box for that element.
Here, the actual width of the element will be equal to the width of the element.
So, the actual content area will shrink in this case but the total width will be same as the width set for the element which also includes margin, padding and border. In other way, it is like –
The Syntax of Box sizing border box:
Example of Box sizing with border box
CSS Box sizing content box
If you do not code the box-sizing property, it will take box-sizing:content-box by default.
The Syntax of Box sizing content box:
Example of Box sizing content box
Box sizing inherit
The box-sizing:inherit will acquire the box-sizing property from its parent element
The Syntax of Box sizing inherit: