The box model, piece by piece

Every element is a rectangle

Round buttons, circular avatars and diagonal banners don't change the fact underneath. Every element a browser renders occupies a rectangular box. A <p>, a <button>, an <img> and a whole <article> each get a box. CSS's rules for sizing, spacing and positioning are rules about how that box behaves. This course is about that one rectangle, and the four layers, nested inside each other, that make it up.

The four layers, inside out

flowchart TB
  subgraph M["margin — space outside the border"]
    subgraph B["border — drawn on the edge"]
      subgraph P["padding — space inside the border"]
        C["content"]
      end
    end
  end

Read it from the inside out, because that's the order each layer gets added:

• Content: the text, image, or child elements themselves, whatever the element contains.
• Padding: transparent space between the content and the border, still counted as part of the element, still paints the element's background color.
• Border: a visible (or invisible) line wrapping the padding and content, with its own width, style, and color.
• Margin: transparent space outside the border, separating this element from whatever sits next to it. Margin belongs to nobody's background, it's pure spacing between elements.

The next lessons cover four properties. padding, border and margin size the last three layers. box-sizing decides how width and height relate to them.

Seeing it in DevTools

Every browser's developer tools draw this diagram for the element you select. You get four nested rectangles with real numbers on each layer. Back in the DOM basics course you opened DevTools to inspect the element tree. The same "Elements" or "Inspector" panel has a "Computed" or "Layout" tab that shows this box model live. Select any element on any page, and instead of imagining the four layers, you'll see their exact pixel measurements. Check this panel whenever a layout looks wrong. It answers "why is there a gap here?" faster than staring at the CSS.

Background color reaches the padding, never the margin

One detail trips up almost everyone. An element's background-color paints the content, the padding and the area under the border, but never the margin.

.card {
  background-color: lightblue;
  padding: 20px;
  margin: 20px;
}

That light blue fills the content and the 20px of padding around it, giving the visible impression of a bigger, painted box. The 20px of margin outside stays fully transparent, showing whatever's behind the element, the page background, a parent element's own color, anything. If you ever want more visible colored space, that's a padding problem. If you want more separation from neighboring elements with no visible color, that's a margin problem. Confusing the two is a common box-model mistake, and it's why this course gives each one a full lesson.

What this course covers

• Lesson 1, The box model, piece by piece: content, padding, border, margin, and how DevTools shows you all four (you are here)
• Lesson 2, box-sizing (content-box vs border-box): what width and height measure
• Lesson 3, Padding: space inside the border, and how it's set
• Lesson 4, Border: the line between padding and margin, plus rounded corners
• Lesson 5, Margin: space outside the box, and centering with margin auto
• Lesson 6, Margin collapsing: the surprising rule where adjacent vertical margins merge
• Lesson 7, Putting it together: building a styled card using every layer of the box model

By the end, a CSS rule that sets padding, border, or margin won't be guesswork, you'll know which rectangle it's resizing and why.