Session 11 — The box model

You will master the model behind every CSS layout: every element is a box with content, padding, border, and margin from the inside out. You will learn how width interacts with the layers, the modern border-box default, padding/margin shorthands, margin collapsing, borders and rounding, centring with margin: 0 auto, and overflow.

Plan: ideas → worked boxes → bridge → short drills → reveal.

Time: about 60–70 minutes if you compute the occupied width of every box before reading the reveal.

Session 11 — The box model

The one-paragraph story

Every element on a page is a box, and the box model describes its four layers from the inside out: content, padding, border, and margin. Padding is space inside the border (it pushes the border away from the content), the border draws the edge, and margin is space outside the border (it pushes neighbouring boxes away). This session makes the mental model exact: how width/height interact with the layers, how box-sizing changes what width means, and how to compute the space an element actually occupies. Every layout session after this one is the box model applied at scale.

---

The four layers

.card {
  width: 200px;         /* the content width  */
  padding: 10px;        /* inside the border  */
  border: 2px solid #1f3a5f;
  margin: 20px;         /* outside the border */
}

flowchart LR
    M["margin (outside)"] --> B["border (the edge)"]
    B --> P["padding (inside)"]
    P --> C["content (width/height)"]

From the inside out:

1. Content — the text, image, or inner elements. width and height normally describe this layer.
2. Padding — transparent space inside the border. Backgrounds and background-colours extend through padding.
3. Border — the visible (or invisible) edge: width, style, colour.
4. Margin — transparent space outside the border. It separates the box from its neighbours; it does not carry the element's background.

The layers wrap an element like a parcel: the gift is the content, the tissue is the padding, the ribbon is the border, and the space between parcels on the shelf is the margin.

---

Width, height, and what they mean

With the default box-sizing: content-box, width means the content width only. The element's actual horizontal space on the page is:

content + padding-left + padding-right + border-left + border-right

So for the .card above: 200 + 10 + 10 + 2 + 2 = 224 px of occupied width (before margin, which adds another 20 + 20 = 264 px total). The same math applies vertically with height, padding, and borders.

This surprises everyone once: you set width: 200px and the box renders wider, because padding and border are added on top.

---

box-sizing: content-box vs border-box

box-sizing decides which part width/height describe:

* {
  box-sizing: border-box;
}

• content-box (default) — width = content only; padding and border are added.
• border-box — width = content + padding + border, all inside the declared width.

With border-box, the .card above is exactly 200 px wide, and the content shrinks to 176 px to make room for padding and border. Modern practice sets border-box globally (the * selector means every element) because "what I set is what I get" is far easier to reason about. Layout sessions (13–15) assume border-box.

---

Padding shorthand

Padding can be written one, two, three, or four values:

padding: 10px;              /* all four sides    */
padding: 10px 20px;         /* top/bottom  left/right */
padding: 10px 20px 5px;     /* top  left/right  bottom */
padding: 10px 20px 5px 15px;/* top  right  bottom  left */

The four-value order goes clockwise from the top: top, right, bottom, left. Individual sides exist too: padding-top, padding-right, padding-bottom, padding-left. The same shorthand pattern applies to margins and borders.

---

Margin shorthand and collapsing

Margins use the same shorthand — and they collapse. When two boxes stack vertically, their margins do not add; the larger of the two wins:

p { margin: 20px; }

Two paragraphs: the space between them is 20 px, not 40 px — the bottom margin of the first and the top margin of the second collapse into one. Horizontal margins (side by side) do not collapse; they add.

Also note: margins are invisible space. Backgrounds do not extend into margins, and margins between an element and the page edge create the page's breathing room.

---

Borders

.card {
  border: 2px solid #1f3a5f;
}

One shorthand for three things: border: width style color;. The style must be present — solid, dashed, dotted, or none — since a border with no style is invisible even if width is set. Individual sides: border-top, border-bottom, etc. And border-radius rounds the corners:

.card { border-radius: 8px; }

border-radius: 8px softens every corner; 50% (on a square element) makes a circle. Rounded corners are the cheapest way to make a page feel designed.

---

Setting width and centering a box

A common pattern: give a block a fixed width and centre it horizontally with automatic side margins:

main {
  width: 720px;
  margin: 0 auto;
}

margin: 0 auto — zero top/bottom, auto left/right — lets the browser split the leftover space equally, centring the 720 px box. This is the classic "content column" pattern every café page will use.

---

Overflow

When content is too big for its box, overflow decides:

.card {
  height: 100px;
  overflow: hidden;      /* clip   */
  /* overflow: auto;     /* scrollbar when needed */
}

hidden clips the overflow; auto shows a scrollbar only when needed; visible (default) lets the content spill out. A fixed height with long text is where this matters — with overflow: visible (the default) the text simply overflows the box.

---

Pitfalls to watch for

• Padding and border add to width — unless box-sizing: border-box, the box renders wider than declared.
• Backgrounds cover padding, not margins — margin is the invisible gap.
• Vertical margins collapse — two stacked 20 px margins make one 20 px gap.
• A border needs a style — border: 2px #000; draws nothing; 2px solid #000 draws.
• auto side margins centre — margin: 0 auto is the centring idiom, not margin: auto 0.

Session 11 — Worked examples

Example A — Computing the real width

.box {
  width: 200px;
  padding: 10px;
  border: 2px solid #1f3a5f;
  margin: 20px;
}

With the default content-box, the box's occupied width on the page:

content     200
padding     10 + 10   = 20
border       2 + 2    =  4
---------------------------
occupied           224 px
margin      20 + 20  = 40 px more of page space

Step by step: the content is 200 wide; padding pushes the border outward by 10 on each side; the border adds 2 on each side; margin separates the whole box from neighbours by 20 on each side. The layout column needs 264 px of space per box.

---

Example B — box-sizing changes everything

* {
  box-sizing: border-box;
}
.box {
  width: 200px;
  padding: 10px;
  border: 2px solid #1f3a5f;
}

Now width: 200px is the total — content + padding + border. The content shrinks to 200 − 10 − 10 − 2 − 2 = 176 px, but the box occupies exactly 200 px. This is why the course sets border-box globally: "set a width, get that width".

---

Example C — Padding vs margin, one element

.announcement {
  background-color: #fff3cd;
  padding: 12px;
  margin: 16px 0;
}

Draw the box: a pale yellow fill (background) covers content and padding; the border sits at the fill's edge (here 0, so invisible); the 16 px vertical margin is empty space — no background — above and below, separating the announcement from the paragraphs around it. The background visibly includes the padding but never the margin.

---

Example D — Borders with style and radius

.card {
  border: 1px dashed #2e7d32;
  border-radius: 8px;
  padding: 16px;
}

• 1px dashed #2e7d32 — width, style, colour: a dashed green edge.
• border-radius: 8px — rounded corners.
• padding: 16px — text does not touch the border.

A missing style would make the border invisible: border: 2px #2e7d32; draws nothing.

---

Example E — The centred column

main {
  width: 720px;
  margin: 0 auto;
  background-color: #ffffff;
}

The main region is 720 px wide, has white background, and margin: 0 auto splits the leftover horizontal space equally — the column sits centred in any window. Note: this works because main is a block element; a box with display: inline (Session 13) would ignore the width.

---

Example F — Margins collapse between paragraphs

p { margin: 20px 0; }

Three stacked paragraphs: between paragraph 1 and 2 there is 20 px, not 40 px. The 20 px bottom margin of the first and the 20 px top margin of the second collapse into the larger single value. Side-by-side boxes (horizontal margins) do not collapse — they add.