Happy international box sizing awareness day
My all-time favourite CSS technique — courtesy of Paul Irish — celebrates another birthday.
My favourite CSS techniques are the ones that are tiny but have a huge impact. Step up the global box-sizing technique, which Paul Irish published in 2012. Chris Coyier declared February 1st, International box-sizing awareness day, which I also celebrate every year.
This is how I use the technique in my “modern reset”:
- Code language
This is slightly different to Paul’s
inherit pattern. I prefer to be more explicit with this sort of thing. Either way works though, so I wouldn’t recommend losing any sleep over it.
What does this technique change? permalink
I’ll let past me explain from the Learn CSS course:
Alongside an understanding of how user agent styles affect each box, you also need to understand
box-sizing, which tells our box how to calculate its box size. By default, all elements have the following user agent style:
content-boxas the value of
box-sizingmeans that when you set dimensions, such as a
height, they will be applied to the content box. If you then set
border, these values will be added to the content box's size.
box-sizing behaviour creates a confusing situation when dimensions are applied to an element. Using
border-box however makes everything much more predictable. I’ve had the attitude for years now that
content-box should be the default, but it is what it is.
Wrapping up permalink
Of all the fantastic capabilities and techniques that have arrived in CSS in the last 12 years, this is still the greatest of all time, in my opinion.
Go forth and build predictably sized boxes