The original box model behavior was eventually considered unintuitive, so a new CSS property called
box-sizing was created. When you set
box-sizing: border-box; on an element, the padding and border of that element no longer increase its width. Here is the same example as the previous page, but with
box-sizing: border-box; on both elements:
We're the same size now!</div>
Since this is so much better, some authors want all elements on all their pages to always work this way. Such authors put the following CSS on their pages:
This ensures that all elements are always sized in this more intuitive way.
box-sizing is pretty new, you should use the
-moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+.