Last Updated: February 25, 2016
· mkjones

Kill the old-style CSS box model with 'box-sizing: border-box '

* {-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; 
box-sizing: border-box;}

This small piece of code re-works the default CSS box model by forcing the web browser to use any extra border and padding attributes and include them in the set-width of an object rather than add it.

For example, a 200px box with 10px padding and a 5px border would still be viewed as 200px wide and NOT the standard width of 230px (200 + 10 + 10 + 5 + 5).

It's pretty awesome but remember, it doesn't work for margins (shame).

1 Response
Add your response

Margins if made to work to be calculated inside the box, then it should already be called a "padding" too. Its more appropriate now that the box-sizing puts the padding inside, and the margin remains outside.

over 1 year ago ·