Free Tool
CSS Box Sizing Calculator
Find the space left for content after padding and borders. Compare both box models in your browser.
Same width, different content space
| Box model | Content | Border box |
|---|---|---|
content-box | ||
border-box |
Selected model: width breakdown
Dark edges: borders. Yellow: padding. Blue: content.
Diagram scaled to fit; tiny segments may be hard to see. A zero-width box has no visible segments.
Generated CSS
Where did the content width go?
With content-box, CSS width specifies the content area. Add left and right padding and borders to get the border-box width. With border-box, subtract those same edges from CSS width to find the content area.
For a 320px width, 24px padding on each side, and 2px borders, content-box gives 320px of content inside a 372px border box. border-box gives 268px of content inside a 320px border box.
When padding is wider than the box
Content width cannot fall below zero. If padding and borders exceed a declared border-box width, the content area becomes zero and the border box grows to fit the edges. This calculator handles that floor instead of showing a negative width. The rules are defined in the CSS Box Sizing specification; MDN's box-sizing examples illustrate both models.
Use the numbers in a real layout
This is a horizontal pixel calculator for an ordinary box with a specified width. The export sets vertical padding and borders to zero and uses solid horizontal borders. Merge the declarations into your own selector. Margins, scrollbars, transforms, min/max widths, and flex or grid size adjustments are outside this calculation; browser pixel rounding can also affect measurements. Verify the final used size in browser DevTools.
If a title still refuses to truncate, follow the ellipsis and flex minimum-width guide. For proportional image sizing, try the Aspect Ratio Calculator, or browse all frontend tools.