The Box Model

Every element on a web page is a rectangle made of nested layers. Once the box model clicks, "why is my element 40 px too wide?" stops being a mystery.

The four layers

Visualise: a box of content, wrapped in foam (padding), wrapped in a shell (border), with a gap around it (margin).

content-box vs border-box

By default (content-box), width describes content only — padding and border are added on top:

.a {
  box-sizing: content-box;   /* default */
  width: 300px;
  padding: 20px;
  border: 5px solid;
}
/* rendered width = 300 + 20·2 + 5·2 = 350px */

With border-box, width includes padding + border — what designers mean when they say "300px wide":

.b {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid;
}
/* rendered width = exactly 300px; content shrinks to fit */

Expected output: two boxes that look identical inside, but .b is 50 px narrower overall.

The universal reset every project needs

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

Put this at the top of your stylesheet, always. It removes 90% of layout surprises.

Margin vs padding — when to use which

A card: padding for the content inside, margin-bottom (or grid gap) between cards. A button: generous padding, no margin (the flex gap handles spacing).

Shorthand orders

margin: 10px 20px;        /* top/bottom 10, left/right 20 */
margin: 10px 20px 30px;   /* top 10, left/right 20, bottom 30 */
margin: 10px 20px 30px 40px; /* clockwise: top right bottom left */

padding: 1rem;            /* all sides */
border: 1px solid #e2e8f0;   /* width style color */
border-radius: 8px 8px 0 0;  /* per-corner, clockwise */

Margin collapsing (preview)

Adjacent vertical margins in normal flow collapse into one — the larger wins (margin-top: 30px next to margin-bottom: 10px leaves 30 px, not 40). The full rules live in Display & Margin Collapsing; modern layouts avoid the issue entirely with flexbox/grid gap.

Outline: the border that never shifts layout

button:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;   /* draws outside the border box */
}

Unlike border, an outline does not take space — focus rings never move your layout. That is why accessibility outlines are outlines.

Inspecting boxes in dev tools

1. Right-click an element → Inspect.
2. Open the Styles/Computed panel — the famous nested-box diagram shows every layer's size with colour coding (content blue, padding green, border orange, margin red).
3. Hover the diagram to highlight the area on the page.

Make this a reflex whenever spacing looks wrong.

Practical example: a predictable card

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: white;
}

.card + .card { margin-top: 1.25rem; }

Expected output: cards exactly 340 px wide (border included), 24 px of inner air, stacked 20 px apart — regardless of content.

Common mistakes

• Forgetting the reset — mixing models across components causes cumulative width bugs.
• Using margin for inner spacing — clicking the "gap" hits nothing, and backgrounds stop extending.
• Setting both width and max-width with padding — fine with border-box, a nightmare without.
• Every element gets borders — whitespace and background contrast usually communicate structure better.

Practice checklist

1. Rebuild the two-box experiment and verify rendered widths in dev tools.
2. Add the universal border-box reset to your stylesheet.
3. Create a card (width, padding, border, radius) and confirm the total width equals your width value.

Boxes need placement rules — next: Display & Margin Collapsing.