A bit of background history.
1) IE5 and below, when you specify padding / border in a div box, the content inside the box was shrinking to accommodate the extra space of those values. If you had a 200px box, with a 10px border and 10px margin, the content shrank to 180px.
2) IE6 and above, padding / border was pushing the box in the example above to 220px instead (the content reminds 200px, the rest is taken from outside the box, and push all the other elements around to make space for it.
3) Sometimes that doesn’t work well with fluid layout, and those extra pixels push stuff out of place, it would be ideal to tell DOM boxes to behave like IE5, pushing for extra pixels inwards instead of outwards their box limit.
4) Meet box-sizing property, since IE8 onwards you can do that:
box-sizing: content-box|border-box|inherit:
content-box is the default behavior (it pushes stuff out to make space for padding and borders)
border-box: in pushes stuff inside the DOM element, reducing its internal size, to accommodate padding and border. You can use it to make sure your fluid elements won’t push stuff out of place
Note: the default behavior for DOM elements is content-box, except when you don’t explicitly specify the width of an element, or if the element is set to be 100% width, tables and table elements are also using this “substractive behavior” by default.