Goal

You’ll be able to calculate an element’s actual rendered width and height by hand, accounting for padding, border, and margin, and understand exactly what box-sizing changes and why almost every real project sets it deliberately.

Learn

Every element in CSS is a rectangular box made of four layers, from the inside out: content, padding, border, and margin.

• Content — the actual text or child elements inside the box.
• Padding — space between the content and the border, still considered “inside” the element visually (it shares the element’s background color).
• Border — a visible (or invisible) line drawn around the padding and content.
• Margin — invisible space outside the border, pushing other elements away from this one. Margin never has a background color; it’s purely spacing between elements.

Here’s the part that trips up almost everyone at first: by default, when you set width: 200px, that width applies only to the content box. Padding and border get added on top of that 200px, making the element’s actual rendered size larger than what you set. This default behavior is called content-box sizing.

Let’s work through the math explicitly. An element with width: 200px; padding: 20px; border: 5px solid black; under default sizing:

Content width:        200px
+ Padding (both sides): 20px × 2 = 40px
+ Border (both sides):    5px × 2 = 10px
= Total rendered width:            250px

Margin is calculated separately again, on top of that 250px, but margin doesn’t add to the element’s own visible size — it adds to the space it occupies relative to its neighbors.

Because this default behavior causes so much unexpected overflow (especially in responsive layouts using percentages), the vast majority of real projects apply this fix near the top of their stylesheet:

* {
  box-sizing: border-box;
}

This changes the meaning of width: with border-box, the width you set already includes padding and border. So width: 200px really does mean the element is 200px wide, total, and the content area shrinks to make room for padding and border inside that fixed total, instead of growing beyond it.

Decision Task

An element has width: 200px; padding: 20px; border: 5px solid black;, using the default box-sizing. What is its actual total rendered width? Work it out before reading on.

Reveal the Answer

250px. Content (200px) + padding on both sides (20px × 2 = 40px) + border on both sides (5px × 2 = 10px) = 200 + 40 + 10 = 250px. The width you set only ever describes the content area under default settings.

Common Mistake

This is exactly why elements often overflow their container unexpectedly: a developer sets an element to width: 100% of its parent, then adds padding, and the element becomes wider than its parent’s available space, breaking the layout — sometimes causing a horizontal scrollbar to appear across an entire page from just one overflowing element. The box-sizing: border-box; fix mentioned above solves this exact, extremely common bug.

Practice Questions

1. An element has width: 300px; padding: 15px; border: 3px solid; under default (content-box) sizing. What is the total rendered width?

Show Answer

300 + (15×

2. Using the same element as question 1, but with box-sizing: border-box; applied instead, what is the total rendered width now?

Show Answer

300px total — border-box makes the set width the final total, so content shrinks to fit inside it.

3. Does margin affect an element’s own visible size, or only the space around it? Explain the difference.

Show Answer

Only the space around it; margin never affects the element’s own rendered size, only how far it sits from neighboring elements.

4. A card component uses width: 100% inside a container, then a developer adds padding: 24px and the card suddenly overflows its container. Diagnose exactly why, referencing box-sizing.

Show Answer

Under default content-box sizing, the 100% width applies only to content, so the 24px padding on each side adds on top of that, pushing the total width beyond the container’s available space.

5. Why do most real projects apply box-sizing: border-box globally (using the * selector) rather than element by element?

Show Answer

Applying it globally guarantees consistent, predictable sizing behavior across every element in the project, rather than needing to remember to add it individually every time a new component is built.

Try It Yourself

Using the same element from the Decision Task, if you added box-sizing: border-box;, what would the total rendered width be now?

Show Answer

with border-box, the 200px you set already includes padding and border, so the total width is simply 200px, and the content area shrinks to fit inside that instead of adding on top of it.

Quick Check

1. List the four layers of the box model from innermost to outermost.

Show Answer

Content, padding, border, margin.

2. Under default box-sizing, does padding add to the width you set, or subtract from it?

Show Answer

Adds to it.

3. What does box-sizing: border-box change about how width is calculated?

Show Answer

It makes the set width include padding and border, so the total rendered size matches the width value exactly, instead of growing beyond it.

4. Using the same element from the Decision Task, if you added box-sizing: border-box;, what would the total rendered width be now?

Show Answer

with border-box, the 200px you set already includes padding and border, so the total width is simply 200px, and the content area shrinks to fit inside that instead of adding on top of it.

5. An element has width: 200px; padding: 20px; border: 5px solid black;, using the default box-sizing. What is its actual total rendered width? Work it out before reading on.

Show Answer

250px. Content (200px) + padding on both sides (20px × 2 = 40px) + border on both sides (5px × 2 = 10px) = 200 + 40 + 10 = 250px. The width you set only ever describes the content area under default settings.