CSS3 Click Chart

Box Sizing

Allows you to change how the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation.


Box Sizing on W3C

Example Code

Live Demonstration

Extra padding does not make this box wider or taller. It will be only as large as its width and/or height properties define.

Browser Support

Tools / Polyfills

box-sizing Polyfill by Schepp

Tutorials / Articles

* { box-sizing: border-box } FTW
box-sizing on MDN
Controlling width with CSS3 box-sizing
Box Sizing on CSS-Tricks

Fork me on GitHub