Box Sizing

In the last lesson you learned about Width and Height. So now you can set how wide and how tall a box should be. But there is a tricky thing about that width. When you add padding or a border, the box can become bigger than the number you wrote. That feels wrong, right? This lesson fixes that.

📦 What is Box Sizing?

Every element on a page is a box. Inside that box sits the content. Around the content there can be padding, which is the empty space inside the box. Then there can be a border, which is the line around the box.

So now the question is simple. When you say width: 200px, does that 200px count only the content? Or does it count the padding and the border too?

That choice is what box-sizing controls. Box-sizing is the CSS property that decides what the width and height number includes.

There are two values you will use:

• content-box is the old default. The width is only the content. Padding and border get added on top.
• border-box is the friendly one. The width includes the content, the padding, and the border, all together.

🖼️ A Real-Life Way to Think About It

Think about a picture frame on a wall.

You go to a shop and you ask for a frame that is 30 cm wide. There are two ways the shopkeeper can measure that 30 cm.

• One way is the glass inside is 30 cm. Then the wooden border adds extra on top. So the real frame on your wall ends up wider than 30 cm.
• The other way is the whole frame, wood and all, is 30 cm. The glass inside is a bit smaller to make room for the wood.

The first way is content-box. The second way is border-box. Most people want the second way. You asked for 30 and you got 30.

🤔 Why content-box Causes Pain

Let me show you the problem first. Here is a box where we set a width and also add padding and a border.

This CSS makes a box 200px wide, then adds padding and a border on top.

.card {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* the old default */
}

You wrote 200px. But the real box on screen is not 200px. The browser adds the padding on both sides and the border on both sides.

So the real width becomes:

• 200 for the content
• plus 20 padding on the left and 20 on the right
• plus 5 border on the left and 5 on the right

That is 200 + 40 + 10 = 250px. Your box is now 250px wide, not 200px.

✅ How border-box Fixes It

Now let’s use border-box and keep everything else the same.

This CSS sets the same box, but now the 200px includes the padding and border.

.card {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box; /* the friendly way */
}

With border-box, the browser keeps the whole box at 200px. To do that, it makes the content area smaller so the padding and border fit inside.

So the math is now:

• The full box stays 200px
• The padding and border sit inside that 200
• The content gets the space that is left, which is 200 - 40 - 10 = 150px

🧩 content-box vs border-box

Here is a quick side-by-side so you can remember the difference.

🌍 The Trick Most Developers Use

Here is something good to know. Most people do not write box-sizing on every single element by hand. Instead they set it one time at the top of the file for everything.

This rule tells the browser to use border-box for every element on the page.

* {
  box-sizing: border-box;
}

The * is the universal selector. It means “every element”. So this one short rule makes the whole page behave the friendly way. You write it once, and then your widths always mean what you think they mean.

⚠️ Common Mistakes

A few things trip up beginners with box-sizing. Watch out for these.

• Forgetting that content-box is the default. If you do not set anything, padding and border still add to your width. So the box grows.
• Setting width: 100% with padding while on content-box. The box becomes more than 100% wide and pushes past the screen. Switching to border-box fixes this fast.
• Thinking border-box removes the padding. It does not. The padding is still there. It just fits inside the width now instead of adding to it.

✅ Best Practices

Keep these simple habits and box sizing will never confuse you.

• Add * { box-sizing: border-box; } near the top of your stylesheet in every project.
• Once you do that, you can set a width and add padding without doing extra math in your head.
• When a box looks bigger than the number you set, check the box-sizing first. It is the usual reason.

🧩 What You’ve Learned

Let’s go over the main points one more time.

• ✅ Every element is a box with content, padding, and a border.
• ✅ box-sizing decides if the width counts only the content or the whole box.
• ✅ content-box is the default. Padding and border get added on top, so the box grows bigger than you set.
• ✅ border-box keeps the box at the exact width you set. Padding and border fit inside.
• ✅ Most developers add * { box-sizing: border-box; } once to make the whole page easy to control.

🚀 What’s Next?

Now you understand how the width number is measured. Next you will see the full box model, which puts content, padding, border, and margin together in one clear picture.

CSS Box Model Explained