Basically when sizing a box in our design we have 4 elements that should be considered (from the outer to the inner) :
Basically those 4 make all about sizing, content is not very special (in this explanation) as its sizing is pretty straight forward, but box-sizing makes its difference when considering the other three.
If you anytime need a reference just open up the dev tools (ctrl+shift+i) of chrome and when you select any element you will see something like this:
Or in firefox:
Let's start talking about the margin, in all cases the margin is the space between one element and the next one, so you will basically assume that starts from the border, meaning that border+padding+content are all sized before the margin but by default that it doesn't work like that, when you size your box by default only the content is considered as the box (That's why box-sizing is by default "content-box") and all the other three properties (border, padding and margin) add space to the definition that you actually made to your box (I.E. a div).
As an example, if you define an element with a width of 600px by 600px and then padding of 25px and a border of 25px, then you will end up with an element with a width of 600px+25px+25px and a height following the same rule.
You can actually use that to size your web site but it will make your life much harder, so what I use on the sites I make is "box-sizing: border-box", that way the size you define for your elements will already include the padding and the border, and the only external space you have to take care is the margin.