content-box
width applies only to the content area. Padding and border increase final size.
Platform under construction
Box Sizing
box-sizing controls what width and height actually mean. With border-box, the browser includes padding and border inside the declared size.
*, *::before, *::after {
box-sizing: border-box;
}
Box Model
box-sizing decides whether padding expands the box or fits inside it.
By default, CSS uses content-box. That means width controls the content area only. Padding and border are added on top, so the final rendered box can become wider than the width you wrote.
With border-box, width includes content, padding and border. This usually matches how designers and developers think about component size.
Most modern projects set border-box globally because it makes cards, columns, inputs and responsive layouts much easier to reason about.
border-box
width includes content, padding and border. This is usually easier to control.
Global reset
Apply border-box to all elements and pseudo-elements for predictable sizing.
Still inspect
Computed sizes can include min-width, max-width, flex rules and content limits.
Visual model
See the box before you change the CSS.
Layout debugging becomes much easier when you can point to the exact part of the box that creates the visual result: inner space, outer space, edge, size or overflow behavior.
300px content + 48px padding + 4px border = wider than expected.
300px total width contains content, padding and border together.
Examples
Professional spacing is deliberate, not decorative guesswork.
Predictable sizing reset
*,
*::before,
*::after {
box-sizing: border-box;
}
.panel {
width: 320px;
padding: 24px;
}
Width that quietly grows
.panel {
width: 320px;
padding: 40px;
border: 4px solid currentColor;
/* final width is no longer 320px */
}
Rules that matter
Make every spacing and sizing decision explainable.
Box model CSS should make the interface easier to reason about. When a value cannot be explained, it usually becomes a future layout bug.
Use border-box by default
It matches the mental model most people expect when they set width.
Include pseudo-elements
Decorative before and after boxes should follow the same sizing logic.
Remember replaced elements
Images and inputs can have their own intrinsic sizing behavior.
Do not hide overflow as a fix
If the box is too wide, solve sizing before clipping content.
Combine with max-width
border-box and max-width make responsive components easier.
Teach the team
Everyone should know whether the project uses content-box or border-box.
Production thinking
The box model is where visual polish becomes maintainable CSS.
Why does this matter?
box-sizing prevents the classic CSS surprise where an element becomes wider because padding was added after width was already defined.
Accessibility
Predictable sizing helps keep form fields, buttons and focus states from clipping or overflowing.
Production note
A border-box reset belongs near the start of your stylesheet, before component rules depend on sizing assumptions.
SEO note
Stable boxes reduce visual jumps and improve the reading experience, especially on mobile.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change both widths to 420px and compare the final rendered size.
- Increase padding and predict which box grows wider.
- Add max-width: 100% and test the narrow preview behavior.
Practice assignment
Do this before moving to the next lesson.
- Write a border-box reset from memory.
- Create two boxes with the same width but different box-sizing values.
- Explain which one is easier to use in a responsive layout.
Try it yourself
Compare content-box and border-box
Self-check
Before you continue, prove that you understand Box Sizing.
Answer these questions before moving on. If the answer is vague, change the lab CSS and inspect the box again.
- Can you explain content-box without saying only "default"?
- Can you explain why border-box is often used globally?
- Can you include pseudo-elements in a sizing reset?
- Can you predict how padding affects final width in both models?
- Can you debug a too-wide component without guessing?
Senior audit upgrade
Border-box is safer, but know what it changes.
Most modern projects use border-box globally because widths become easier to predict. Third-party widgets can still assume content-box, so isolate carefully.
Global reset
* { box-sizing: border-box; } is common because padding and borders stay inside declared width.
Third-party CSS
Embedded widgets may bring their own sizing assumptions. Test forms, iframes and vendor components.
Team convention
Everyone on the project should know which sizing model is expected.