VisaSpark
Sign in
beginner18 min

The CSS Box Model

Understand content, padding, border, and margin — the four layers that determine every element's rendered size and spacing.

What you'll learn

  • Identify the four layers of the box model: content, padding, border, and margin
  • Predict an element's rendered size given its width, padding, and border
  • Use box-sizing: border-box to keep declared widths predictable

Prerequisites

Explanation

Every single element on a web page is, underneath any visual styling, a rectangular box. Learning to see that box's four layers is the single most useful mental model for understanding why elements are the size and position they are.

The Four Layers

From the inside out:

  1. Content — the actual text, image, or other content, sized by width and height.
  2. Padding — transparent space between the content and the border, pushing the border outward without affecting the content itself. Set with padding.
  3. Border — a line (or nothing, if unset) drawn around the padding. Needs a width, a style like solid, and usually a color, e.g. border: 2px solid black;.
  4. Margin — transparent space outside the border, separating this box from its neighbors. Unlike padding, margin is not part of the element's own visual box — it's the gap between boxes.

Why "100px wide" Doesn't Always Mean 100px Wide

Here's the part that surprises almost everyone at first: by default, width and height only describe the content box. Padding and border get added on top of that. So an element with width: 100px; padding: 10px; border: 5px solid; actually renders at 100 + 10 + 10 + 5 + 5 = 130px wide — the padding and border on both sides all add up.

This default behavior is called box-sizing: content-box. It's rarely what you actually want, because it means adding padding to a "100px" box makes it not be 100px anymore, breaking layouts built around exact sizes.

box-sizing: border-box

Setting box-sizing: border-box; changes the meaning of width and height to include padding and border. With that same element now set to border-box, a declared width: 100px stays exactly 100px total — the browser shrinks the available content area to make room for padding and border instead of adding to the outside. This is so consistently useful that many developers apply it globally with a rule like * { box-sizing: border-box; } near the top of their stylesheet, so every element behaves predictably by default.

Margin Collapsing

One more wrinkle worth knowing: when two block elements are stacked vertically and both have vertical margins facing each other (say, the first has margin-bottom: 20px and the next has margin-top: 30px), those margins don't simply add up to 50px of space. In many common cases they collapse into a single gap equal to the larger of the two — 30px, not 50px. This "margin collapsing" behavior only applies to vertical margins between certain block-level elements, never to padding or borders, and never to horizontal margins.

Once you can mentally add up content, padding, and border to predict a rendered size — and remember that border-box keeps that arithmetic simple — box-model surprises mostly disappear from your CSS debugging.

marginborderpaddingcontent

The box model layers

Four nested rectangles, from innermost to outermost: content (the text or image itself), padding (space inside the border, around the content), border (a visible or invisible line), and margin (space outside the border, separating this box from its neighbors). With the default box-sizing: content-box, an element's declared width covers only the content layer, and padding plus border are added on top of it; with box-sizing: border-box, the declared width already includes padding and border.

Example

A card whose declared width stays exactly 200px total because box-sizing: border-box folds padding and border inside it.

<!doctype html>
<html>
  <head>
    <style>
      .card {
        width: 200px;
        padding: 20px;
        border: 5px solid #333;
        margin: 30px;
        box-sizing: border-box;
        background: #eee;
      }
    </style>
  </head>
  <body>
    <div class="card">
      This card is exactly 200px wide in total, because box-sizing: border-box folds padding and border inside the declared width.
    </div>
  </body>
</html>

Try it yourself

Delete the box-sizing line and press Run — watch the card grow past 200px because padding and border now add to the width.

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Guided exercise

Guided exercise

Add box-sizing: border-box; to the .box rule so the element's rendered width stays exactly 200px, even with padding and a border.

Checks: .box renders at exactly 200px wide · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Independent exercise

Independent exercise

Style #box-one to render at exactly 100px by 100px using box-sizing: border-box with 10px padding and a 5px border. Then give #box-two a margin-top of at least 30px so there is visible space between the two boxes.

Checks: #box-one is exactly 100px wide · #box-one is exactly 100px tall · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Common mistakes

  • Forgetting that the default box-sizing is content-box, so padding and border silently make elements bigger than the declared width.
  • Confusing margin (space outside the border, between elements) with padding (space inside the border, around the content).
  • Expecting two adjoining vertical margins between stacked elements to always add together — they often collapse into the larger single margin instead.
  • Setting a border color but forgetting border-style — without a style like solid, dashed, or dotted, most browsers render no visible border at all.

Knowledge check

Knowledge check

1. Reading from the inside out, what is the correct order of the box model's layers?
2. With the default box-sizing: content-box, a div with width: 100px, padding: 10px, and border: 5px solid renders at what total width?
3. What does box-sizing: border-box change?
4. Which property creates space between an element's border and its neighboring elements?

Takeaway

Once you can add up content, padding, and border in your head — and reach for box-sizing: border-box — no layout width will ever surprise you again.

Summary

Every element is a box made of four layers: content, padding, border, and margin. By default, width and height only cover the content layer, so padding and border add extra size on top — box-sizing: border-box changes that, folding padding and border inside the declared width so sizes stay predictable.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Flexbox Layout →