Box Sizing Property in CSS

So, what's the deal with CSS Box Sizing border-box property that we use pretty much everywhere. Let's figure it out together.

Before that, to have a quick refresher of the Box Model in CSS, refer to the previous blog here.

In CSS, all elements are made out of 4 components- content box, padding, border, and margin. There are two methods of box-sizing that we use in CSS.

1. Content Box

By default, box-sizing is set to the content box.
It means that when we give something a width or a height, we're not setting the size of the element. We're setting the size of the content box.
Let's look at this here. We have a content box, and I've given it a width of 500 pixels. You can see it is 500 pixels, and I've put a blue box underneath. It's just acting like a scale.
If we add some padding of, say, 25 pixels, we're going to see it's actually going to get wider than this box. So it's now 500 pixels plus 25 on the left side, plus 25 on the right side. So it's actually 50 pixels wider. And if we add a border of 5 pixels solid red just so we can see it, that's also adding to the total size of the box. So now we're getting bigger and bigger. Even if we take the padding off of that, actually, we can see that it's still sticking off the side here because the border is giving it the extra width. That's the default behavior.

body{
  color: white;
}
.scale{
  width: 500px;
  height: 50px;
  background: #00bbf9;
}

.content-box{
  width: 500px;
  padding: 25px;
  border: 5px solid red;
  background: #9b5de5;
}

.border-box{
  width: 500px;
  padding: 25px;
  border: 5px solid green;
  background: #f15bb5;
}

Try it yourself

2. Border Box

Let's set our box-sizing to border-box. We still have a width of 500 pixels. But now if we add padding of 25 pixels, it's adding it inside by changing the boxes into border-box. We're now including both the padding and the border in there as well, and we're only using width now, but heights the same thing would apply to it.
We can also add a border of 5 pixels solid red and that border is also on the inside instead of being on the outside. So it's a nice way to the border-box by resetting the box-sizing on it.
It just makes things a lot easier to control. A lot more predictable. You don't have to start doing math or adding things up. Not that it's difficult, but it's just an extra layer of complexity that you don't really need. So setting a width or setting a height in the instances where you need one and knowing that the padding or the border are just included in that just makes it so much easier.

body{
  color: white;
}
.scale{
  width: 500px;
  height: 50px;
  background: #00bbf9;
}

.content-box{
  width: 500px;
  padding: 25px;
  border: 5px solid red;
  background: #9b5de5;
}

.border-box{
  box-sizing: border-box;
  width: 500px;
  padding: 25px;
  border: 5px solid green;
  background: #f15bb5;
}

Notice how the bottom box shrinks and has a width equal to 500 px.

Try it yourself

Since the result of using the box-sizing: border-box; is so much better and useful, most developers try to use it for all elements. The code below ensures that all elements are sized in this more intuitive way. It is always safe and wise to use this property universally.

*{
box-sizing: border-box;
}

Without the box-sizing property

By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
Generally, when we set the width/height of an element, the element often appears bigger than we have set because the element's border and padding are added to the element's specified width/height.

Key takeaways

The box-sizing property allows us to include the padding and border in an element's total width and height.
This gives a better control over the width and height of elements.

That's all about the box-sizing property of CSS. I hope this was useful to you. Don't forget to leave a comment down below 💐. Thanks for reading!!

omkar ghate