CSS — Box Model

Everything is a box

CSS treats every element as a rectangular box built of four concentric layers:

┌─────────────── margin ────────────────┐
│  ┌──────────── border ─────────────┐  │
│  │  ┌───────── padding ─────────┐  │  │
│  │  │                           │  │  │
│  │  │        content            │  │  │
│  │  │     (text, image…)        │  │  │
│  │  │                           │  │  │
│  │  └───────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└───────────────────────────────────────┘

Layer	Job	Visible?
Content	The text/image itself	Yes
Padding	Breathing room inside the box	Background shows through
Border	The edge line	Yes
Margin	Space outside, pushing neighbors away	Invisible

Master this one diagram and most CSS layout confusion evaporates.

Seeing it live

Open any page, right-click an element → Inspect. DevTools highlights the exact layers in colors:

blue = content · green = padding · yellow = border · orange = margin

The "Computed" tab even draws the full box-model diagram for the selected element with live numbers. This is the fastest debugging tool in all of front-end — use it constantly.

How total size is computed

By default (box-sizing: content-box), declared width covers content only, then the outer layers stack on:

.box {
    width: 200px;
    padding: 20px;      /* ×2 sides = +40 */
    border: 4px solid;  /* ×2 sides = +8  */
    /* margins don't count in the element's own size */
}

Rendered width = 200 + 40 + 8 = 248px   ← surprise!

This default trips up everyone eventually: you set width: 50%, add padding "for looks", and suddenly two columns overflow their row.

The fix: border-box

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

Now width/height mean the whole box including padding and border:

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 4px solid;
}
/* Rendered width: exactly 200px. Content auto-shrinks to fit. */

One line at the top of every stylesheet makes sizing predictable forever. It's in every reset, every framework, every professional project.

Side-by-side

Declaration	content-box renders	border-box renders
width: 200px no extras	200px	200px
width: 200px + 20px padding	240px	200px
width: 200px + pad + border	248px	200px

A worked example

<style>
    * { box-sizing: border-box; }

    .card {
        width: 320px;
        padding: 16px;
        border: 1px solid #ddd;
        background: white;
        margin-bottom: 24px;      /* outside gap between cards */
    }
</style>

<div class="card">
    <h3>Box model card</h3>
    <p>Padding keeps text off the border; margin keeps cards apart.</p>
</div>
<div class="card">Second card…</div>

What the browser displays

(Two white 320px cards stacked with clear space between them; text inside each sits comfortably off its edges.)

Reading it in layers: content fills inside padding: 16px, wrapped by the border, separated from the next card by margin-bottom.

Common symptoms of box-model trouble

Symptom	Usual cause
Two columns overflow their row	Padding added without border-box
Element wider than declared	Same — content-box stacking
Text glued to edges	Missing padding
Elements fused together	Missing margin
Giant unexplained gaps	Collapsing margins (margins lesson)

When layout misbehaves: open Inspect, hover the element, look at which colored layer is bigger than expected.

Mini Practice

1. Build .box { width: 200px }; inspect it — note content size
2. Add padding/border step by step, watching rendered width climb to 248px
3. Flip to border-box and confirm it locks to 200px
4. Build the two-card example above
5. Use DevTools to hover real websites' elements and read their box diagrams — ten minutes of this builds intuition no article can

Next: text →