The CSS Box Model

Rules, selectors and properties

.card {
  background: #1a1a1a;
  padding: 16px;
}

• Selector (.card) — which elements to style.
• Property (padding) — what to change.
• Value (16px) — how much.

.name selects a class, #name an id, and nav selects every <nav>.

The box model

Every element occupies a rectangular box, even if it has no visible outline. From inside to outside, the layers are content → padding → border → margin. The content holds text or an image. Padding keeps that content away from the border. The border surrounds the padded content. Margin leaves space outside the border, separating the element from its neighbours.

Think of a product card: the product name is content, the breathing room around it is padding, the outline is border, and the distance to the next card is outside spacing. Increasing padding makes the card itself larger under the default sizing rule; increasing margin moves neighbours away without colouring that outside space. Background colour covers content and padding, and extends beneath the border, but never paints the margin.

Connect your stylesheet first

Create style.css beside index.html and add this inside the HTML <head>:

<link rel="stylesheet" href="style.css">

Write CSS rules in that file without surrounding <style> tags. The exercise below uses style tags only to keep its tiny HTML example self-contained. If a rule has no effect in your real project, save both files and check the filename, path and class spelling before changing more code.

Predict the size: content-box versus border-box

By default, box-sizing: content-box makes width refer to the content only. Padding and borders add to the outside width:

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  margin: 10px;
}

The visible border-edge width is 200 + 20 + 20 + 2 + 2 = 244px. Including left and right margins, its horizontal footprint is 264px. There are two edges to count. Height follows the same idea, although text wrapping often determines the content height.

Change only box-sizing to border-box. Now the declared 200px includes padding and borders, leaving 156px for content. Margin is still outside, so the footprint is 220px. This is useful when you want a card's stated width to stay predictable as you adjust its padding.

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

That common project-wide rule applies border-box to elements and their generated pseudo-elements. It does not remove padding, and it does not put margins inside width. If padding and borders alone exceed a very small declared width, the box cannot squeeze its content below zero and may still grow.

Read spacing shorthand

Use padding-left or margin-top when changing one side deliberately. Margin is not a coloured strip. Vertical margins of ordinary block elements can collapse: a 20px bottom margin next to a 12px top margin may create 20px of space, not 32px. Horizontal margins do not collapse, and margins between flex/grid items do not collapse. Prefer gap for consistent spacing between layout items.

Custom properties (variables)

:root { --accent: #ff6a00; }
button { background: var(--accent); }

Change one value and your whole brand updates.

Layout: Flexbox and Grid

Ordinary block elements stack vertically. The three boxes in the exercise start that way. They are layout samples, not clickable buttons. Giving a block container gap: 12px does not create a grid or add gaps between those ordinary block children.

Flexbox arranges items along one main direction. Put the layout rule on the parent, not each child:

.cards { display: flex; flex-wrap: wrap; gap: 12px; }

Items sit in a row and wrap when there is not enough space. Padding stays inside each child; gap belongs to the parent and separates its items. Adding child margins as well creates extra outside spacing, so do not confuse the two.

Grid declares columns and rows. Merely changing display to grid defaults to a single column; define the columns too:

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

This creates three equal columns. 1fr is one share of available grid space; minmax(0, 1fr) lets tracks shrink below their content's preferred width. Let cards fill their tracks instead of leaving a conflicting fixed width on them. The playground deliberately keeps fixed-width cards so you can measure their box model; its grid uses three content-sized columns and can scroll on a narrow screen.

Responsive design

Phones and desktops are different widths. A media query changes rules at a chosen viewport width. For your real product grid, keep three columns on larger screens and stack on narrow screens:

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}

Resize the browser and check that text, cards and navigation fit without horizontal page scrolling. width: 100% with content-box can overflow when padding is added; border-box helps keep that width within the parent. The separate Flexbox & Grid lesson goes deeper into alignment and responsive tracks.

The cascade

For ordinary rules of the same origin, importance and cascade layer, the more specific selector wins; if specificity is equal, the later rule wins. A class such as .card is more specific than a tag such as div. Avoid solving every problem with !important; inspect which rule wins first.

Inspect a real box

Open your page, right-click a card and choose Inspect. In DevTools, select the element and find the box-model diagram under Computed or Layout (the name varies by browser). It shows content dimensions and each padding, border and margin edge. The Styles panel shows matched and crossed-out rules. Temporarily change padding there and watch the page; those edits are not saved to your stylesheet.

If a card is too wide, check its computed width, box-sizing, padding and borders. If cards touch, check whether the parent really uses flex/grid and whether gap applies. If text touches the border, adjust padding, not the parent's gap. Diagnose the layer that is wrong rather than adding random spacing.

Predict, change, explain

In the exercise, leave width at 120px, padding at 12px and border at 2px. Predict the border-edge width: 148px in content-box. Switch to border-box: the outside width becomes 120px, with 92px of content. Then increase padding and notice which measurement changes in each mode.

Compare Block, Flex and Grid. Increase gap in Block and notice the ordinary children do not separate because of it; in Flex and Grid, gap separates them. Set margin to zero before comparing gap so two spacing sources do not hide the difference. Finally, edit the CSS directly, change one value and confirm the preview matches your prediction.

For your website assessment, apply these ideas to the actual page: link style.css correctly, give content breathing room, use the layout tool suited to the section, and test a narrow viewport. The exercise is practice, not an extra score or unlock requirement.