Paulo Poiati | Blog

A not well know and underestimated css property: box-sizing

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