The Box Model: Content, Padding, Border, Margin

"Every element is a box. The four rings around the content are what every layout argument is actually about."

The Four Rings

Every CSS box has four concentric regions, from innermost to outermost:

1. Content — the text, image, or child elements.
2. Padding — space inside the border. Background color extends into padding.
3. Border — visible boundary. Has its own color, width, and style.
4. Margin — space outside the border. Transparent; pushes neighbors away.

DevTools (any browser) shows these visually in the Computed pane: a square diagram with colored regions for content (blue), padding (green), border (yellow), margin (orange). Memorize the order; everything in this lesson comes back to it.

The width/height Question

Here's the trap: when you write .box { width: 200px; padding: 20px; border: 1px solid; }, how wide is the rendered element?

By default (box-sizing: content-box — the historical default): 242px. The 200px is the content width; padding and border add to it.

With box-sizing: border-box: 200px. The 200px is the outer width; padding and border live inside it.

Which one matches your mental model? Almost everyone says "200px" — they assume border-box. The default is content-box, which is why every modern reset starts with:

The Universal Reset (Memorize This)

This three-line reset is in every modern CSS file. Apply it on every page you write, then forget the default ever existed:

Margin Collapse: The One Place Math Lies

When two vertical margins meet, they don't add. They collapse to the larger of the two. <h2 style="margin-bottom: 30px"> followed by <p style="margin-top: 20px"> produces 30px between them, not 50px.

The rules:

• Vertical only. Horizontal margins never collapse.
• Adjacent siblings collapse. The space between two block elements is the larger of the bottom margin of the first and the top margin of the second.
• Parent and first/last child collapse when nothing separates them (no padding, no border, no inline content). This is why "my child's margin-top pushes the parent down" is a thing.
• Negative margins collapse with positive. margin-top: -10px with sibling's margin-bottom: 30px gives 20px between them.

Collapse only happens in block flow. Flexbox children don't collapse. Grid items don't collapse. This is a major reason modern CSS uses Flexbox and Grid for layout: margin collapse stops surprising you.

min-width, max-width, min-height, max-height

Constraints, not values. They override width/height when triggered:

• min-width wins over width when the content would shrink below it.
• max-width wins over width when the content would grow beyond it.
• Most useful pattern: img, video { max-width: 100%; height: auto; } — images shrink to fit but never overflow their container.
• Most useful page pattern: main { max-width: 70ch; margin: 0 auto; } — readable line length, centered.

Aspect Ratio: The Modern Property

aspect-ratio: 16 / 9 sets a box's height as a ratio of its width. Used to require padding-bottom hacks; now native. Pairs perfectly with responsive images and embeds.

Pippa's Note