Inspect the working example
The original panel declares width 200px, 20px padding on each side and a 5px border. border-box makes 200px the complete outer width rather than just the content allocation.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Outer box | Read measured border-box width | 200px |
| Content budget | 200 − 2×20 − 2×5 | 150px |
| Narrow frame | Inspect at 320 CSS pixels | Panel fits with its padding and border included |
Follow the browser mechanism
box-sizing changes what a declared width measures. With border-box, padding and border consume space inside that declaration. Margin remains outside. This exact arithmetic assumes the supplied fixed values, not a universal estimate for every panel.
Content-box adds padding outside the declared width
Only box-sizing changes in this alternative; the declared width, padding and border stay the same.
<style>body{margin:8px}</style>
<style>.sample{width:200px;padding:20px;border:5px solid;box-sizing:content-box}</style><section class="sample">Workshop note</section>The outer box becomes 250px: 200+40+10. Its content remains 200px.
Try the repair
A border-box panel is 240px with the same padding and border. How much width remains for content?
Show the worked answer
190px: 240−40−10. The outer width remains 240px.
- Record measured bounds and computed padding/border separately.
- Do not count margin as part of the border box.