Happy international box sizing awareness day

Categories

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
CSS
*,
*::before,
*::after {
  box-sizing: border-box;
}

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: box-sizing: content-box;.

Having content-box as the value of box-sizing means that when you set dimensions, such as a width and height, they will be applied to the content box. If you then set padding and border, these values will be added to the content box's size.

This default 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 🫡

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I’m a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.