1.6.d — The Box Model

In one sentence: Every element in CSS generates a rectangular box made of content → padding → border → margin layers, and understanding this model — especially box-sizing — is the single most important layout fundamental.

Navigation: ← 1.6.c — Inheritance · 1.6.e — Units →

---

1. The four layers

┌──────────────────────────────────────────┐
│                 MARGIN                   │  ← transparent spacing outside the border
│  ┌────────────────────────────────────┐  │
│  │              BORDER                │  │  ← visible edge (color, width, style)
│  │  ┌──────────────────────────────┐  │  │
│  │  │           PADDING            │  │  │  ← space between border and content
│  │  │  ┌────────────────────────┐  │  │  │
│  │  │  │        CONTENT         │  │  │  │  ← text, images, child elements
│  │  │  └────────────────────────┘  │  │  │
│  │  └──────────────────────────────┘  │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

Layer	What it does	Background fills it?
Content	Holds text, children, replaced content	Yes
Padding	Space between content edge and border	Yes
Border	Visible edge around the padding	Has its own color
Margin	Space outside the border, between this box and neighbors	No — always transparent

---

2. box-sizing — the most important declaration

content-box (default)

width and height set the content area only. Padding and border are added on top:

Total width = width + padding-left + padding-right + border-left + border-right

A width: 200px element with padding: 20px and border: 2px actually occupies 244px.

border-box (what you want)

width and height include content + padding + border:

Total width = width  (padding and border are subtracted from the content area)

A width: 200px element with padding: 20px and border: 2px occupies exactly 200px.

The universal reset

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

Every modern CSS reset uses this. Always set border-box globally — it makes layout math predictable.

---

3. Margin behavior

Margin collapsing

Adjacent vertical margins of block-level elements collapse — the larger margin wins (they do not add):

Element A: margin-bottom: 30px
Element B: margin-top: 20px
─── gap between them: 30px (not 50px) ───

When margins collapse:

• Adjacent siblings (vertical)
• Parent and first/last child (if no border, padding, or BFC boundary)
• Empty blocks

When margins do NOT collapse:

• Horizontal margins (never collapse)
• Flex/grid children (flex formatting context)
• Elements with overflow other than visible (creates BFC)
• Floated or absolutely positioned elements

Negative margins

Negative margins pull elements toward the margin direction — they overlap. Useful for offsetting, but use sparingly.

margin: auto

Horizontal centering of block elements:

.container {
  width: 800px;
  margin: 0 auto;  /* top/bottom: 0, left/right: auto = centered */
}

In flexbox, margin: auto absorbs available space in any direction — powerful for push-based layouts.

---

4. Padding vs margin — when to use which

Use padding when…	Use margin when…
You want space inside the border	You want space between elements
Background should fill the space	Space should be transparent
Click/tap area should include the space	Elements should be pushed apart

---

5. Shorthand syntax

/* All four sides */
margin: 10px;                    /* all */
margin: 10px 20px;               /* vertical | horizontal */
margin: 10px 20px 30px;          /* top | horizontal | bottom */
margin: 10px 20px 30px 40px;     /* top | right | bottom | left (clockwise) */

Same pattern for padding, border-width, border-radius.

---

6. Inline vs block boxes

Box type	Behavior
Block (div, p, section)	Full width; stacks vertically; respects all margin/padding
Inline (span, a, strong)	Width of content; flows in line; vertical margin/padding does not affect layout flow
Inline-block	Inline flow but respects width/height and all margin/padding

Key gotcha: vertical margin and padding on inline elements are applied visually but do not push surrounding content — use inline-block or display: block if you need layout impact.

---

7. outline vs border

	outline	border
Part of box model?	No — drawn outside the border, no layout impact	Yes — adds to element size (in content-box)
Rounds corners?	Yes (modern browsers)	Yes (border-radius)
Use case	Focus indicators (a11y), debugging	Visible design borders

Never remove outline without providing an alternative focus style (see 1.5.e).

---

8. DevTools: inspecting the box model

The Box Model diagram in DevTools (Elements → Computed or Styles) shows the exact pixel values for content, padding, border, and margin — hover to highlight each layer on the page.

---

9. Key takeaways

1. Every element is a box: content → padding → border → margin.
2. Always use box-sizing: border-box globally — predictable sizing.
3. Vertical margins collapse; horizontal margins never do.
4. margin: auto centers block elements horizontally.
5. Padding is inside the border (background fills it); margin is outside (always transparent).

---

Explain-It Challenge

Explain without notes:

1. Why an element with width: 200px; padding: 20px; border: 2px takes 244px in content-box but 200px in border-box.
2. What margin collapsing is and one scenario where it surprises developers.
3. Why outline is better than border for focus indicators.

---

Navigation: ← 1.6.c — Inheritance · 1.6.e — Units →