Here is another user post with an image – Trying to put an image here. And come long content.
box-sizing property can make building CSS layouts easier and a lot more intuitive. It’s such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.
But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.
#Box Model History
Since the dawn of CSS, the box model has worked like this by default:
width + padding + border = actual visible/rendered width of an element’s box
height + padding + border = actual visible/rendered height of an element’s box
This can be a little counter-intuitive, since the width and height you set for an element both go out the window as soon as you start adding padding and borders to the element.
Back in the old days of web design, early versions of Internet Explorer (<= IE6) handled the box model differently when it was in “quirks mode”. The “quirks” box model worked like this: width = actual visible/rendered width of an element’s box height = actual visible/rendered height of an element’s box The border and padding values were moved inside the element’s box, cutting into the width/height of the box rather than expanding it.