The Box Model Explained

Every element in CSS is a rectangular box. Understanding this is not a detail — it is the foundation of every layout and spacing decision you will ever make in CSS.

The box model is what the browser uses to determine how much space an element occupies and how it interacts with other elements around it. Mastering it means you stop guessing and start reasoning.

The four layers

Think of any HTML element as a picture in a frame hanging on a wall:

• The photo is the content — the actual text, image, or other HTML inside the element
• The mat around the photo is the padding — space between the content and the frame
• The frame is the border — a visible (or invisible) boundary around the padding and content
• The wall space around the frame is the margin — space between this element and other elements

From inside out, the four layers are:

Content

The content box is where your text, images, and child elements live. Its size is controlled by width and height.

.tour-card {
  width: 300px;
  height: 200px;
}

Padding

Padding is space inside the border. It expands the visual area of the element — the background color fills the padded area.

.tour-card {
  padding: 1.5rem;
}

Adding padding makes the element appear larger — the background color extends through the padded area.

Border

The border wraps the padding and content. It is drawn on the edge of the padding box.

.tour-card {
  border: 2px solid #2c4a1e;
}

A border with border-style: none is invisible but still occupies space (0px by default).

Margin

Margin is space outside the border. It is always transparent — it does not take on the element’s background color. Margin pushes other elements away.

.tour-card {
  margin-bottom: 2rem;
}

Visualizing all four layers

Here is a complete example showing all four layers on an STO tour card:

.tour-card {
  /* Content */
  width: 300px;

  /* Padding — space inside the border */
  padding: 1.5rem;

  /* Border */
  border: 2px solid #2c4a1e;

  /* Margin — space outside the border */
  margin-bottom: 2rem;
}

The total space the element occupies on the page is:

margin + border + padding + content width + padding + border + margin

(left and right sides add together for the total horizontal space)

Margin collapse

When two block elements stack vertically, their vertical margins collapse into a single margin equal to the larger of the two — they do not add together.

.hero {
  margin-bottom: 3rem;
}

.tours-section {
  margin-top: 2rem;
}

The space between .hero and .tours-section will be 3rem, not 5rem. The 2rem margin is absorbed by the 3rem.

This is called margin collapse and only happens with vertical margins between block elements. Horizontal margins never collapse, and margins inside flex or grid containers do not collapse.

Visualizing the box model in DevTools

Open DevTools (F12), click an element, and scroll to the bottom of the Styles panel — or click the Computed tab. You will see an interactive box model diagram showing all four layers with their exact pixel values.

Hovering over each layer highlights it in the browser viewport, so you can see exactly how much space each layer occupies.

Exercise

In your tours.html file (Summit Trail Outfitters), add a tour card with some content, then style it in your stylesheet:

1. Open style.css and find (or add) a .tour-card rule. Add all four box model layers:

.tour-card {
  width: 300px;
  padding: 1.5rem;
  border: 2px solid #2c4a1e;
  margin-bottom: 2rem;
  background-color: #fff;
}

2. Open the page in your browser. Open DevTools (F12) and click a tour card.

3. In the Styles panel, scroll down until you see the box model diagram. You should see all four layers — content, padding, border, and margin — with their pixel values labeled.

4. Hover over each layer in the diagram. Watch the corresponding area highlight in the browser.

5. Try changing the padding value in DevTools directly (click the number and type a new value). Watch the card expand and contract in real time.

Recap

• Every HTML element is a rectangular box with four layers: content, padding, border, margin.
• Content is the actual element content; padding is space inside the border; border wraps padding and content; margin is space outside the border.
• Background color fills the content and padding area, but not the margin.
• Vertical margins between block elements collapse to the larger value — they do not add together.
• The DevTools Computed tab shows a live box model diagram for any selected element.

Lesson 02 builds directly on this: you will learn how width and height interact with padding and border — and why box-sizing: border-box changes everything.