Course home ยท Phase 2: CSS

6: The Box Model

Every element on the page is a rectangle made of four stacked layers. Understand margin, border, padding, and content, and most CSS sizing bugs stop being mysterious.

The four layers

Every element is a rectangle built from the same four layers, content in the middle, then padding, then border, then margin on the outside.

margin: space outside, transparent
border: the edge
padding: space inside
content: text, image, children

Order from the center out: content, then padding, then border, then margin.

.card {
  width: 300px;              /* content width (by default) */
  padding: 16px;             /* inside space */
  border: 1px solid #ddd;    /* edge */
  margin: 20px auto;         /* outside space, auto centers block */
}
Why it works: DevTools has a Computed tab with a Box Model diagram that shows these four layers for any element. Hover each value to highlight it on the page. Learn to read that diagram and debugging gets much faster.

The one line that saves you: box-sizing: border-box

content-box (default)

100px plus 32px padding plus 8px border, 140px wide total

Width here is content only. Padding and border get added on top, so boxes overflow their expected size.

border-box (recommended)

100px total, padding fits inside

Width now includes padding and border. What you set is what you get.

/* put this FIRST in every stylesheet */
* { box-sizing: border-box; }

/* now width: 300px means total 300px, not 300 + padding + border */

This is why shared.css:1 starts with * { box-sizing: border-box; }. Copy that rule into every project.

width / height, max-width, and margin auto

max-width: 400px; margin: 0 auto;
Caps at 400px but shrinks on small screens, and centers because it's a block with auto margins.
width:140px
margin:0 auto
/* classic centered container */
.container {
  max-width: 720px;   /* don't get wider than this */
  margin: 0 auto;     /* center horizontally (block needs width/max-width) */
  padding: 0 16px;    /* breathing room on mobile */
}
Gotcha: margin: 0 auto only centers block elements with a set width or max-width. On inline elements or width:auto it does nothing. For flex or grid children, margin: auto centers on that axis too (see Module 9).

Collapsing margins: the surprise

Vertical margins between blocks collapse instead of adding together. They overlap rather than stack.

Box A, margin: 20px 0
Box B, margin: 20px 0

The gap between A and B is 20px, not 40px, because the margins collapsed.

/* gap is 20px, not 40px */
h2 { margin-bottom: 20px; }
p  { margin-top: 20px; }  /* collapses with h2's bottom margin */

To avoid it: add padding or border to the parent, use gap with flex or grid, or just account for it when spacing things out.

Live demo: a button three ways

Same visual button, three different box model choices.

/* brittle, breaks if text wraps or font changes */
.btn-fixed { height: 36px; }

/* flexible, preferred */
.btn { padding: 10px 16px; border: 1px solid #111; }

/* fun variant */
.btn-pill { border-radius: 999px; }
Why padding wins for buttons: height clips wrapped text and needs manual vertical centering. padding grows with the content and centers naturally.
Exercise: Rebuild a button 3 ways (15 min)
  1. Create three <button> or <a> elements.
  2. Style one with height, one with padding, one with border-radius: 999px.
  3. Inspect each in DevTools' Box Model panel and compare total sizes.
  4. Add * { box-sizing: border-box; } and watch the numbers change.
Prev5: Your First CSS Rule Next7: How to Actually Center a Div