CSS Box Sizing

* {
  box-sizing: border-box;
}

.box {
  width: 300px;
  padding: 24px;
}

Let me ask you something.

Have you ever set the width of an element to 300px, added some padding to it, and then wondered why it was suddenly wider than 300px? You told it to be 300px. Why is it not 300px?

I remember being genuinely confused by this for longer than I would like to admit. It felt like CSS was lying to me.

It was not lying. It was just using a sizing model I did not fully understand yet. Once I learned about box sizing everything clicked and layouts stopped behaving unexpectedly.

Let me explain it properly.

How CSS Calculates Size by Default

By default CSS calculates the size of an element like this.

The width and height you set only apply to the content inside the element. Any padding or border you add gets added on top of that.

So if you write this:

You told the box to be 300px wide. But what you actually get is:

• 300px content width
• plus 24px padding on the left
• plus 24px padding on the right
• plus 2px border on the left
• plus 2px border on the right

Total actual width — 352px.

That is the default behavior. The width you set is just for the content. Everything else gets added on top. This is called content-box sizing and it is the CSS default.

The Problem This Causes

Imagine you are building a layout with two columns sitting side by side. You want each column to be exactly 50% wide so they fill the page perfectly.

You would expect them to sit perfectly side by side. But they do not. They break onto separate lines because each column is actually wider than 50% once the padding is added.

This is the kind of layout bug that makes beginners want to give up. But there is a simple fix.

The Fix — border-box

CSS gives you a different sizing model called border-box. When you use it the width and height you set include the padding and border — not just the content.

So if you set width to 300px and add 24px of padding the element stays 300px total. The browser shrinks the content area to make room for the padding instead of expanding the whole element.

Now the box is exactly 300px wide. The padding fits inside that 300px. No surprises.

Apply It to Everything

Here is what you should do on every single project you build. Right at the very top of your CSS file before anything else write this:

The universal selector targets every single element on the page and sets them all to border-box. Now every element you create will behave predictably. The width you set is the width you get.

Why This Matters for Layouts

Let us go back to that two column example from before. With border-box it now works perfectly.

Each column is exactly 50% of the page width including its padding. They sit perfectly side by side the way you intended.

This is why box sizing matters. It is not just a theoretical concept. It directly affects how your layouts behave in practice.

Building the Netflix Clone

Let us add box sizing to our Netflix clone reset at the top of the CSS. This is just good practice and we want to make sure everything behaves predictably as the layout gets more complex.

The reset at the top now includes box-sizing: border-box alongside the margin and padding reset. Every element on the page will now size predictably. As we build more complex layouts in the coming lessons this will quietly save us from a lot of headaches.