How the CSS box model decides an element's real size
You set a width of 200 and the element takes up 260. Padding, border and margin all add to it — unless box-sizing changes the rules, which is why one line of CSS is in almost every stylesheet ever written.
How the CSS box model decides an element's real size — the interactive part
Why 200 is almost never 200
In the original box model, width describes the CONTENT only. Padding sits outside it, the border sits outside that, and each is added on. So a 200px element with 20px padding and a 4px border occupies 248px, and the number in your stylesheet appears nowhere on screen. Margin then reserves space around all of it without being part of the element at all.
What border-box actually changed
With box-sizing: border-box, width means the whole visible box, and padding and border eat into the content instead of adding to it. Set 200 and the element is 200. This is why so many stylesheets open by applying it to everything: it makes the number you typed the number you get, which is what almost everyone assumed it meant.
Check your understanding
width: 300, padding: 20, border: 5, margin: 10. How wide is the visible element?
Pick one to check yourself.