The CSS Box Model Explained for Beginners

When a page has an unexpected scrollbar or a card looks wider than its declared width, the CSS box model is usually part of the explanation.

The browser lays out elements as boxes. A block box has a content area surrounded by optional padding, a border, and margin. Understanding which parts count toward width turns sizing from guesswork into a calculation.

Every visible element creates a box

Headings, paragraphs, sections, and links all generate boxes according to their display type. This lesson concentrates on block boxes because all parts of the box model are easiest to see there.

From the inside outward, a block box has:

1. content — text, an image, or another child;
2. padding — space inside the element around its content;
3. border — a line or other border around the padding and content;
4. margin — space outside the border that separates this box from others.

Background color normally covers the content and padding and is painted beneath the border. Margin is transparent; it creates separation rather than an inner colored area.

The content area holds the real content

The content area is where text and child elements are laid out. With the default content-box sizing, a declared width describes this area:

.demo-box {
  width: 16rem;
}

That rule does not yet include padding or borders in the 16rem measurement.

Padding creates inner space

Padding sits between content and border:

.demo-box {
  padding: 1.5rem;
}

The shorthand adds 1.5rem on all four sides. Horizontally, that means 3rem in total. Padding can make text easier to read by keeping it away from the edge of a card.

Do not use repeated spaces or empty paragraphs to create this separation. Spacing belongs in CSS.

The border surrounds content and padding

A border has a width, style, and color:

.demo-box {
  border: 0.35rem solid #3946d6;
}

There is a border on both the left and right, so this contributes 0.7rem to the box’s outer width under content-box sizing.

Margin separates boxes

Margin sits outside the border:

.demo-box {
  margin-block: 1rem;
}

Margin does not add to the element’s visible background or border. It affects the surrounding layout by creating outside space.

Vertical margins between normal block boxes can sometimes collapse into one margin rather than adding together. You do not need every edge case yet. When vertical spacing surprises you, inspect both elements and consult MDN’s margin-collapsing guide.

Why the rendered box can exceed width

Under the default content-box model, the outer border width is:

content width + left/right padding + left/right border

For the rules above:

16rem + 3rem + 0.7rem = 19.7rem

Margin affects how much surrounding space the box needs, but it remains outside the border box. This distinction matters when you compare an element’s own rendered size with the total area it occupies in normal flow.

box-sizing: content-box

content-box is the initial value for elements that accept width and height:

.content-box {
  box-sizing: content-box;
}

The declared width controls the content. Padding and borders are added outside it. This is not incorrect; it is simply a sizing model you must account for.

box-sizing: border-box

With border-box, the declared width includes the content, padding, and border:

.border-box {
  box-sizing: border-box;
  width: 16rem;
  padding: 1.5rem;
  border: 0.35rem solid #008ba0;
}

The outer border box stays 16rem wide. The browser reduces the available content area to make room for the padding and border.

This makes component sizing easier to predict, especially when a box must fit inside a flexible container.

Why many projects set border-box everywhere

A common foundation is:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

The root receives border-box, and every element and generated pseudo-element inherits it. The inheritance is explicit because box-sizing does not inherit by default.

This rule is a project choice, not a new browser default for every element. It simplifies common layouts, while you can still set content-box on a particular element when that model serves a deliberate purpose.

Use width and max-width together

A fixed width can overflow when the containing space becomes narrower. A flexible pattern is:

.card {
  width: 100%;
  max-width: 36rem;
}

The card can use the available width but stops growing at 36rem. If its parent already provides side padding, this may be enough. Another common component pattern is width: min(36rem, 100%).

max-width is a limit, not a request to make the element that wide. The actual used width can be smaller when less space is available.

Responsive sizing follows available space

Responsive CSS is not only media queries. Percentage widths, max-width, min(), flexible padding, and wrapping can make an element adapt before any breakpoint is needed.

Avoid width: 700px on a card intended for a 390px viewport. Also avoid a fixed height for text content: larger text, translation, or a narrower width can need more vertical space.

Contain necessary overflow instead of hiding page overflow

Some content is naturally wider than its reading column. A long code line or data table may need its own horizontal scrolling wrapper:

.code-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

That is internal overflow. The wrapper stays inside the page while its contents scroll.

A page-level horizontal scrollbar usually signals that some element extends beyond the viewport. Do not begin with body { overflow-x: hidden; }; that can hide inaccessible or clipped content. Inspect the overflowing element, then fix its width, wrapping, or container.

Build a visual box-model comparison

Create these files:

box-model-comparison/
├── index.html
└── styles.css

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Box model comparison</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <p class="eyebrow">Box model comparison</p>
      <h1>The same width can produce different boxes</h1>
      <p class="intro">Both boxes have the same declared width, padding, and border.</p>

      <div class="box-list">
        <section class="demo-box content-box" aria-labelledby="content-box-title">
          <h2 id="content-box-title">content-box</h2>
          <p>Padding and borders are added outside the declared content width.</p>
        </section>
        <section class="demo-box border-box" aria-labelledby="border-box-title">
          <h2 id="border-box-title">border-box</h2>
          <p>Padding and borders are included inside the declared width.</p>
        </section>
      </div>
    </main>
  </body>
</html>

body {
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  background: #f4f6fb;
  color: #17203a;
}

main {
  width: min(48rem, 100%);
  margin-inline: auto;
  padding-block: clamp(2rem, 8vw, 5rem);
}

.eyebrow {
  color: #3946d6;
  font-weight: 800;
  text-transform: uppercase;
}

.intro {
  max-width: 55ch;
  line-height: 1.7;
}

.box-list {
  margin-top: 2rem;
}

.demo-box + .demo-box {
  margin-top: 1.5rem;
}

.demo-box {
  width: min(16rem, calc(100% - 4rem));
  padding: 1.5rem;
  border: 0.35rem solid #3946d6;
  border-radius: 0.75rem;
  background: white;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
  border-color: #008ba0;
}

The careful calc() keeps the content-box example inside a narrow container even after its horizontal padding and borders are added. The point is to compare the boxes, not to create accidental page overflow.

Inspect the box model in DevTools

Inspect each .demo-box and find the box-model diagram in the Layout or Computed panel. It usually displays nested areas with the content size in the center, then padding, border, and margin.

Compare these details:

1. the declared width in the matched rule;
2. the computed content width;
3. the left and right padding;
4. the border widths;
5. the final rectangle highlighted on the page.

Disable box-sizing: border-box temporarily. The second card should grow to match the first card’s sizing behavior.

Common mistakes

Treating width as the outer width under every model. Check box-sizing first.

Adding padding to width: 100% with content-box. The result can exceed its container. Use border-box or adjust the sizing deliberately.

Using margin for inner breathing room. Margin separates boxes; padding creates space inside a border or background.

Giving text containers a fixed height. Content can overflow after zoom, translation, or a font change. Prefer natural height and a minimum only when needed.

Hiding horizontal overflow on the page. Find the box that is too wide instead of clipping it invisibly.

What to learn next

You can now size one element predictably. Next, learn how Flexbox arranges a group of boxes and lets them wrap as space changes. The box model will help you understand each flex item’s minimum and available size.