A not well known and often over looked css property: box-sizing

May 12, 2012

The box-sizing (introduced in CSS3) is one of the forgotten properties, no one talks about it but can be really useful in some situations.

What it does? In the Mozilla words:

“The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.”

There are two possible values for this property:

  • content-box (default)
  • boder-box

The content-box is the default value, when it is set, the padding and border properties are put outside the bounds of your element, for example:

  div.box { width: 200px; height: 200px; border: 15px solid black; padding: 10px; }



250px


The above box total width and height will be:

200 + (2 * 15) + (2 * 10) = 250px

Now, if we change to border-box:

div.box { 
  box-sizing: border-box; 
  width: 200px; height: 200px; border: 15px solid black; padding: 10px; 
}



200px


The box size stay unchanged. By the way, this behavior in the box model is analogous to Internet Explorer when the document is in Quirks mode.

comments powered by Disqus