Development

What Is the CSS Box Model, Really?

Learn what the CSS box model actually is, why element sizing can be confusing, how margin, border, padding, and content interact, and why box-sizing changed modern CSS.

What Is the CSS Box Model, Really?

Every HTML element on a webpage is a box: headings, buttons, images, forms, even entire page layouts are ultimately collections of boxes arranged in different ways. This idea sounds simple enough.

The confusion begins when a developer creates an element with:

width: 300px;

and discovers that it somehow occupies more than:

300px

of space. That moment usually leads to the CSS box model.

Understanding the box model explains a surprising amount of CSS behaviour, including sizing issues, layout bugs, overflowing elements, and one of the most commonly used CSS rules on the modern web.

The Fundamental Idea

Browsers do not see an element as merely content: they see it as a box containing several layers.

A simplified box model looks like this:

+-------------------+
|      Margin       |
| +---------------+ |
| |    Border     | |
| | +-----------+ | |
| | |  Padding  | | |
| | | +-------+ | | |
| | | |Content| | | |
| | | +-------+ | | |
| | +-----------+ | |
| +---------------+ |
+-------------------+

Every element is built from these parts, and understanding how they interact is the key to understanding CSS sizing. For the full reference on how this works, see the MDN box model guide.

The Four Parts of the Box Model

The box model consists of:

Content
Padding
Border
Margin

Each serves a different purpose.

Content

The content area contains the actual information. Examples include:

  • Text
  • Images
  • Videos
  • Form controls

Images in particular come in different formats with different sizing behaviour, covered in SVG versus PNG and vector versus raster images, but regardless of format they still occupy space as part of the content area.

Consider:

width: 300px;
height: 200px;

Those dimensions apply to the content area by default, not the entire box. This distinction is important.

Padding

Padding creates internal space around content. Example:

padding: 20px;

Visual result:

Border
 └─ Padding
      └─ Content

Padding pushes content inward while increasing the total size of the element. A button with padding feels larger and easier to click even though the content itself remains unchanged.

Border

The border surrounds the padding and content. Example:

border: 2px solid black;

The border contributes to the element’s total dimensions, and many developers overlook this when calculating layouts.

Margin

Margin creates external space. Unlike padding, margin sits outside the element. Example:

margin: 20px;

Visual result:

Element
      ↓
Empty Space
      ↓
Next Element

Margins control separation between elements, while padding controls spacing inside elements. This distinction causes countless beginner mistakes.

Why Width Doesn’t Always Mean Width

Consider:

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

Many developers expect:

300px

total width. The browser calculates:

300px content
40px padding
10px border

Result:

350px total width

The specified width only applies to content: everything else gets added. This behaviour surprises many developers when they first encounter it. For the formal definition, see the CSS Box Model specification.

The Original CSS Box Model

Historically, browsers used what is now called:

box-sizing: content-box;

This remains the default behaviour.

Calculation:

Width
+
Padding
+
Border
=
Actual Width

Example:

width: 300px;
padding: 20px;
border: 5px solid;

Result:

350px total width

The declared width is not the final width.

Why Developers Found This Frustrating

A layout containing:

width: 50%;

for two columns, with padding then added:

padding: 20px;

Suddenly:

50% + 50% + padding

exceeds the available space. Layouts break, overflow appears, and developers spend hours debugging. This problem became so common that an alternative sizing model gained widespread adoption.

Enter box-sizing: border-box

Modern CSS often uses:

box-sizing: border-box;

With this model:

Width
=
Content + Padding + Border

Everything fits inside the declared width. Example:

width: 300px;
padding: 20px;
border: 5px solid;
box-sizing: border-box;

Result:

300px total width

The content area shrinks slightly to accommodate padding and borders, while the overall width remains unchanged.

Why Most Projects Use Border Box

Many developers apply:

* {
  box-sizing: border-box;
}

at the beginning of every project. The reason is predictability.

When you declare:

width: 300px;

you usually expect:

300px

not:

350px

Border-box aligns CSS behaviour more closely with developer expectations.

Margin vs Padding

This distinction deserves special attention.

Consider:

padding: 20px;

The background colour expands into the padding area.

Background Visible

Now consider:

margin: 20px;

The background does not extend into the margin.

Empty Space

This difference is often the deciding factor when choosing between the two.

Margin Collapsing

Margins have a behaviour that surprises many developers.

Consider:

margin-bottom: 40px;

on one element. And:

margin-top: 30px;

on the next. Many expect 70px of space. The browser often produces 40px instead.

This behaviour is called:

Margin Collapsing

Vertical margins may combine rather than add together. Padding does not behave this way.

How Backgrounds Interact With the Box Model

Background colours extend through:

Content
Padding

but stop at:

Margin

Example:

background: blue;
padding: 20px;

The blue area includes padding, while the margin remains transparent. Understanding this helps explain many visual layout effects.

Box Model and Flexbox

Modern layout systems still rely on the box model.

Consider:

display: flex;

Each flex item remains a box. Properties such as:

padding
margin
border

continue to affect sizing and spacing. Flexbox changes how boxes are arranged, but it does not replace the box model.

Box Model and Grid

The same principle applies to CSS Grid: grid items remain boxes. Their:

  • Content
  • Padding
  • Borders
  • Margins

still contribute to layout calculations. The box model remains foundational regardless of the layout system being used.

Common Box Model Mistakes

A few mistakes come up repeatedly:

  • Forgetting border width: a border contributes to total size.
  • Confusing margin and padding: padding creates internal spacing, margin creates external spacing.
  • Mixing sizing models: switching between content-box and border-box can create unexpected behaviour.
  • Ignoring overflow: padding and borders can cause elements to exceed available space. Automated visual testing with tools like Playwright can catch these layout regressions before they reach production.
  • Assuming width means total width: under content-box, it usually doesn’t.

Why The Box Model Still Matters

Modern CSS includes:

  • Flexbox
  • Grid
  • Container Queries
  • Logical Properties

Yet the box model remains one of the most important concepts in web development: every layout system ultimately works with boxes, and every element occupies space according to box model rules. Understanding those rules makes many CSS problems much easier to diagnose.

The Mental Model That Helps Most

Instead of thinking:

This is a button.

or:

This is a heading.

think:

This is a box.

With:

Content
Padding
Border
Margin

That perspective explains much of CSS behaviour.

FAQ

Why is my element bigger than the width I set? By default, CSS uses box-sizing: content-box, where the width you set only applies to the content area. Padding and border get added on top, so a 300px-wide box with 20px of padding and a 5px border actually renders at 350px. Switching to box-sizing: border-box makes the declared width include padding and border instead.

What’s the difference between margin and padding? Padding is internal spacing between the content and the border, and the element’s background colour extends into it. Margin is external spacing outside the border, between the element and whatever sits next to it, and backgrounds never extend into it.

Should I use box-sizing: border-box on every project? Most developers do, usually by applying it globally with a * { box-sizing: border-box; } rule at the start of a project. It makes declared widths match rendered widths, which removes a common source of layout bugs.

What is margin collapsing? When two vertical margins meet, like the bottom margin of one element and the top margin of the next, browsers often combine them into a single margin equal to the larger of the two, rather than adding them together. This only happens with vertical margins in normal document flow; padding never behaves this way.

Does the box model still apply with Flexbox and Grid? Yes. Flexbox and Grid change how boxes are arranged on the page, but every flex or grid item is still a box made of content, padding, border, and margin, and all the usual sizing rules still apply to it.

Conclusion

The CSS box model defines how browsers calculate the size and spacing of every element on a page. Each element consists of content surrounded by padding, borders, and margins, with each layer contributing differently to the final layout.

Many sizing issues arise because developers assume width and height represent the total size of an element. Under the default content-box model, padding and borders are added on top of those dimensions. The border-box model changes this behaviour by including padding and borders within the declared size.

Whether you’re using traditional layouts, Flexbox, or CSS Grid, the box model remains one of the most important concepts in CSS. Understanding it makes layout behaviour far more predictable and eliminates many of the sizing surprises that frustrate developers when they first start working with CSS.

Written by the Workshelve team, who write practical explainers on data integrity, networking, and developer tooling.

Top