Box Sizing
Understand the difference between content-box and border-box.
Step 1 of 3
content-box: width means content only
By default, CSS uses content-box — the original behavior from the earliest CSS specification. When you set width: 200px, that only sets the content area. Padding and border are added on top, making the element bigger than 200px.
For example: a 200px-wide element with 20px padding and 5px border actually takes up 250px (200 + 20 + 20 + 5 + 5). This unintuitive math caused real headaches for early web developers.
Think of it this way: It's like ordering a 12-inch pizza and the box adds 2 inches on each side. You asked for 12 inches but the total package is 16 inches!
Web Standard
content-box is the CSS specification default. The width property sets only the content width — padding and border are added on top.
Learn more on MDN
THE CSS BOX MODEL
margin
border
padding
content
Content
Padding
Border
Margin