The four edges (content-box, default)
margin 10
border 5
padding 20
content
200px
200px
| edge | width |
|---|---|
| content | — |
| padding-edge | — |
| border-edge (offsetWidth) | — |
| margin-edge | — |
The demo .c is width:200; box-sizing:content-box —
so it expands to 250px at the border edge.
The toggle: content-box vs border-box
Click to flip box-sizing on the gold element and watch offsetWidth.
margin 10
width:200 — click me
offsetWidth = —
content-box → 250 · border-box → 200.
Same declared width:200.