CSS: box-sizing

The CSS box-sizing property is used to alter the default CSS box model used to caculate width and height of the elements.

box-sizing: content-box

This is the default value defined by CSS standard. The width and height properties are measured, including only the content, but not padding, border and margin. padding, border and margin are out of the box. For example, .box { width: 300px; border: 10px; padding: 0 10px;} will result in a box of 340px rendered in the browser. So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

box-sizing: border-box

The width and height properties include the content, the padding and border, but nor the maigin. So, .box { width: 300px; border: 10px; padding: 0 10px;} leads to a box rendered in the browser of width: 340px. The dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

box-sizing: padding-box

The width and height properties include the content, the padding but neither the border, nor the margin. Most browsers do not support this value.