先看這個例子
本例面板設定闊 200px，每邊內距 20px、邊框 5px。border-box 令 200px 包括整個外框，不只計內容位置。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 外框 | 量度邊框外側闊度 | 200px |
| 內容位置 | 200 − 2×20 − 2×5 | 150px |
| 窄框 | 在 320 CSS 像素框內查看 | 內距及邊框已計在內，面板放得下 |
瀏覽器怎樣處理
box-sizing 決定設定的闊度量度哪一部分。用 border-box，內距和邊框會佔用已設定闊度之內的位置；margin 仍在外。本例算式只按所附固定值，不替所有面板估算。
content-box 會把內距加在設定闊度之外
反例只改 box-sizing，闊度、內距和邊框照舊。
<style>body{margin:8px}</style>
<style>.sample{width:200px;padding:20px;border:5px solid;box-sizing:content-box}</style><section class="sample">工作坊筆記</section>外框變成 250px，即 200+40+10；內容仍有 200px。
試着修正
border-box 面板改成 240px，內距和邊框不變，內容可用多少闊度？
查看參考答案
190px，即 240−40−10；外框仍是 240px。
- 外框實際尺寸，與內距、邊框計算值分開記。
- 不要把 margin 計入 border box。