The box model and box sizing

Categories

To open up this CSS Fundamentals series, we’re looking at one of those most important aspects of CSS to understand: how the box model is affected by box sizing.


If there’s ever one really important thing to remember when writing CSS: it’s that every element is a box. Regardless of how an element looks visually, it’s still a box.

A dashed box with a circle in it

Take the above example: it’s visually a circle because it has border-radius applied to it, but it’s still a box, as far as the browser is concerned.

This is really important to remember when you’re working with CSS, but what’s even more important to remember is understanding how these boxes are both sized and how they interact with their surrounding, sibling boxes.

Padding, borders and the content box permalink

The default box-sizing value for all elements is content-box. This means that when we add padding and/or border to an element, those values will be combined with the desired/content-driven width and height of the element.

This is because the width is applied to the content box part of the box box model. This can be confusing — especially when you are first starting out with CSS.

Code language
css
.box {
  width: 100px;
  padding: 10px;
  border: 10px solid;
}

Width is applied to the content box, but because padding box and border box values are included, they bleed over the edges

The width, padding and border contributing to a 140px computed value even though 100px of width is applied

What happens here is your box’s computed width is actually calculated as 140px. This is because each side of the border box is 10px (20px combined), and each side of the padding box is 10px (20px combined). The width of the box only accounts for these inline sizes.

This is how the box model works out of the box (pun intended), and it’s often unexpected behaviour for beginners because y’know, if you set a width or height, you expect your element to honour that. It’s completely understandable how this confuses people!

Most of the time though, it’s preferable for this default box model behaviour not to be the case. To get more predictability, add this little snippet of CSS to your element’s CSS:

Code language
css
.box {
  box-sizing: border-box;
}

This snippet completely transforms the browser’s calculation of an element’s size. To convert this CSS into plain English, you’re saying: “Take the dimensions that I specified and also account for the padding and border too, instead of adding them to the desired size”.

What you get as a result is a box that’s 100px wide, instead of 140px wide, just like you specified when you set width to 100px!

Combined border box, padding box and content box makes the size of the box, 100px

The fixed box with a predictable width. The lighter border shows the computed width when you don’t have box-sizing: border-box.

The most effective way of showing you this is with a demo. When you toggle the “box sizing” switch to ON, box-sizing: border-box is applied to the box element, making the resulting size the same as the desired size. When it’s switched OFF, the default browser behaviour takes over.

See the Pen A quick demo showing the impact of box sizing on a box element by Andy Bell (@piccalilli) on CodePen.

The element has 10px of padding and a 10px border, which means 40px is added to the width because the element has padding and border either side. The demo box has a minimum size of 250px to make the text easier to read.

Globalising box sizing rules permalink

A lot folks add the box-sizing rule as a global selector to a reset — or default normalising styles — so to demonstrate a more complete example, this is how our CSS now looks:

Code language
css
/* Reset rule */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Box component */
.box {
  width: 100px;
  padding: 10px;
  border: 10px solid;
}

What this reset rule does is instead of just targeting the .box element with box-sizing, it targets every element on the page and any of their pseudo-elements.

This means that every time you add and element to a page, you can guarantee it will be the size that you think it is with little to no surprises. Of course, in a responsive world, setting specific sizes can be problematic, but even then, you know padding and border are not going to make your elements bigger than you thought they’d be.

Wrapping up permalink

I hope this quick run-through of the box model and box sizing has unlocked the concept in your brain. Knowing the fundamentals like this will make you a better CSS developer, I promise. Here’s some links:

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.