What is box-sizing: border-box;?


box-sizingThe “box model” in CSS looks like this:

width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box.

The border and padding values go inwards into the width/height of the box rather than expand it. Expansion of an element is always mind bending.

Block level elements – a div inside a div – the child div defaults to 100% size of the parent, without any CSS styling. If you add padding or border and declare the child to be 100% width, it will blow out of the parent from adding those values to the original width amount (default).

So that’s where the border box value (as opposed to the content-box default), which keeps the styling inside the box.

html {
box-sizing: border-box;
*, *before, *:after {
box-sizing: inherit;

According to Paul Irish, the need to state prefixes for Webkit or Moz is no longer necessary, and most browsers and devices are totally onboard.  The universal (*) selector works great, too, and is a great CSS tool.

article reference: http://css-tricks.com/box-sizing/

related article on Box-Sizing as explained by Paul Irish: www.paulirish.com/2012/box-sizing-border-fox-ftw