The Box Model

Every element is a box

In CSS, every element on the page is rendered as a rectangular box. Understanding the box model is crucial because it controls how much space each element takes up and how elements relate to each other.

The four layers

From inside to outside:

1. Content — the actual text, image, or child elements.
2. Padding — space between the content and the border.
3. Border — a visible (or invisible) line around the padding.
4. Margin — space between this element and neighboring elements.

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  margin: 16px;
}

With default box sizing, the total width of this card is:
300 (content) + 202 (padding) + 12 (border) = 342px

That math gets annoying fast.

Fix it with border-box

By default, CSS sets box-sizing: content-box, which means width only controls the content area. Padding and border are added on top.

Almost every modern project overrides this:

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

Now when you write width: 300px, the element is exactly 300px wide — padding and border are included. This is a game-changer.

Padding vs margin

• Padding creates space inside the element (between content and border).
• Margin creates space outside the element (between this element and others).

.button {
  padding: 12px 24px;   /* vertical | horizontal */
  margin-bottom: 16px;
}

A useful mental model: padding is like the cushion inside a picture frame, and margin is the wall space between frames.

Margin collapse

One gotcha: vertical margins between adjacent elements collapse. If one element has margin-bottom: 20px and the next has margin-top: 30px, the gap between them is 30px, not 50px (the larger margin wins).

This only happens with vertical margins, not horizontal ones, and it doesn't happen with flexbox or grid containers.

Width, height, and overflow

By default, block elements expand to fill the parent width. Explicit sizes interact with the box model:

.card {
  max-width: 480px;
  min-height: 120px;
  overflow: hidden; /* clip content that exceeds the box */
}

max-width is often safer than fixed width for responsive layouts — content can shrink on small screens.

Outline vs border

Borders take up space in the box model. Outlines draw outside the border without affecting layout — useful for focus rings:

button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Never remove focus styles without replacing them; keyboard users depend on visible focus.

Display types and the box model

display: block, inline, inline-block, flex, and grid change how an element participates in layout. Inline elements ignore vertical margin in many cases; block elements stack. The box model still applies — padding and border always surround the content area.

Debugging layout issues

When spacing looks wrong, inspect the element in DevTools and check the box model diagram (content, padding, border, margin). Nine times out of ten, unexpected width comes from forgetting border-box or adding padding on top of a fixed width with content-box.

Block formatting context in practice

Block-level boxes stack vertically in normal document flow, while inline boxes flow horizontally and wrap at line breaks. inline-block blends both: you can set width and height but items sit side by side like inline content. Understanding which display type an element uses explains many layout mysteries — for example, images are inline by default, so a few pixels of baseline gap often appear below them until you set display: block. Percentage widths resolve against the parent content box, so a child at width: 50% inside a padded parent still refers to the parent's content width, not the outer edge including padding.