Why your 200px box is 250px wide: the CSS box model

Every element on a web page is a box made of four layers: content, padding, border and margin.

By default, CSS width measures only the content, so padding and border get added on top. That's why a width: 200px box with 20px padding and a 5px border is really 250px wide, and why two 50% columns suddenly refuse to sit side by side.

The fix is one line: box-sizing: border-box, which makes width mean the whole visible box. Drag the sliders and watch the numbers add up.