CSS Box Model

Here's a secret every CSS developer eventually learns: every single HTML element on a page is secretly a rectangular box. Text, images, buttons, entire sections, all of them are boxes under the hood, and the box model is the rulebook for how big each one of those boxes actually is. Picture four layers, nested inside each other like a picture frame: the content in the middle, padding wrapped around it, a border wrapped around the padding, and margin as the outermost layer separating the whole box from its neighbors. The box-sizing property then decides whether padding and border count toward an element's declared width, or get added on top of it. Once the box model clicks, a lot of confusing layout behavior on a real site like cookiescursor.com suddenly makes perfect sense.

In this page:

The Four Layers of the Box Model
How Browsers Calculate Total Width
box-sizing: content-box (the default)
box-sizing: border-box
Visualizing the Box Model in DevTools

The Four Layers of the Box Model

Every element is made of content in the center, padding around the content, a border around the padding, and margin as the outermost layer. Together these four layers determine an element's total footprint on the page.

Note: Picture a framed photo: the photo is the content, the mat around it is padding, the frame itself is the border, and the wall space around the frame is margin.

Warning: It's easy to forget that margin sits entirely outside the border and never has its own background color or visible edge.

Example: The Four Layers of the Box Model

css

<style>
.box {
  padding: 20px;
  border: 5px solid black;
  margin: 20px;
  background: lightyellow;
}
</style>
<div class="box">Content, padding, border, margin</div>

How Browsers Calculate Total Width

By default, the width and height you declare only describe the content box. Padding and border are added on top of that, so an element's final rendered size is often larger than its declared width alone.

Note: To find an element's true rendered width by default, add up: width + left padding + right padding + left border + right border.

Warning: This default behavior is a very common source of unexpected layout overflow, especially in multi-column grids.

Example: How Browsers Calculate Total Width

css

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  background: lightyellow;
}
</style>
<div class="box">Renders wider than 200px: content + padding + border</div>

box-sizing: content-box (the default)

content-box is the default value of box-sizing. It means the width and height you set apply only to the content area, with padding and border added on top of that.

Note: You rarely need to write 'box-sizing: content-box' explicitly since it's already the browser default, it's mostly useful to know as a comparison.

Warning: Because content-box is the silent default, many layout bugs trace back to developers not realizing this behavior is active.

Example: box-sizing: content-box (the default)

css

<style>
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  background: lightyellow;
  border: 2px solid #cc9900;
}
</style>
<div class="box">200px is just the content area</div>

box-sizing: border-box

Setting box-sizing to border-box makes the declared width and height include padding and border, so the element's final rendered size always matches what you actually typed.

Note: Many developers set '* { box-sizing: border-box; }' once at the top of a project's stylesheet, so every element behaves predictably by default.

Warning: Switching box-sizing partway through an existing project can shift layouts that were built around the old default, so change it early and consistently.

Example: box-sizing: border-box

css

<style>
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  background: lightyellow;
  border: 2px solid #cc9900;
}
</style>
<div class="box">200px now includes the padding</div>

Visualizing the Box Model in DevTools

Every modern browser's DevTools includes a visual box model diagram in the Elements or Inspector panel, showing the exact pixel values for content, padding, border, and margin on the currently selected element.

Note: When a layout looks wrong, open DevTools and check the box model diagram first, it usually explains the mystery in seconds.

Warning: The box model diagram reflects the live, computed values, which can differ from your raw CSS if other rules or inheritance are affecting the element.

Example: Visualizing the Box Model in DevTools

css

<style>
.box {
  width: 150px;
  padding: 10px;
  border: 2px solid black;
  margin: 15px;
}
</style>
<div class="box">Open DevTools and inspect this box's model diagram</div>

Common Mistakes

Forgetting that padding and border add to an element's total width by default, making layouts wider than expected.
Not setting box-sizing: border-box globally, leading to unpredictable width calculations across a project.
Confusing margin (outside the border) with padding (inside the border) when debugging spacing issues.

Chapter Summary

Every HTML element is a box made of four layers: content, padding, border, and margin.
By default, padding and border add to an element's declared width and height.
box-sizing: border-box changes this, including padding and border inside the declared width instead.

Browser Support

The CSS box model and box-sizing property are supported by every modern browser.

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Height/Width Next Lesson → CSS Rounded Corners