CSS3’s Box-Sizing Property and Long-held Assumptions

It’s amazing how you can experience an issue, roadblock, or obstacle for years without knowing that there has been a simple solution available for years.

In this case, I am talking about a CSS problem, specifically when you would like to add padding to a box but have that box stretch to fill 100% of its container. The traditional box model included interior padding in an element’s width, so if you included padding in, for example, a textarea element and set the width of that element to 100%, it would stretch outside its containing element.

Enter the CSS3 spec’s box-sizing property. If you set this property value like so:

{ box-sizing: content-box;}

The affected element will fill its containing element without overflowing the parent’s boundaries. Neat.

The sad part is, I’ve dealt with this in various projects for years and always assumed that it would always be a limitation of the box model. Today, I learned differently.

So what’s the bigger point? It’s simple: don’t assume that long-standing problems don’t have new solutions.