DeepBuildintermediate25 min

The box model, in depth

Why the card looks the way it does — content, padding, border, margin, and stacking.

You will build

A correct mental model of how every CSS box is sized and spaced.

You will learn

box-sizing, the padding/border/margin layers, and how specificity decides which rule wins.

Open the full project in VS Code

Prerequisites

The Learn tier of this subject, or equivalent comfort writing a CSS rule.

Every element is a box with four layers: content, then padding, then border, then margin. The card’s padding: 24px pushes the content inward; the shadow sits outside the border box. Understanding the layers is the difference between guessing at spacing and controlling it.

project · css-card · Style the card Open in Code

index.htmlHTML

1<article class="card">
2  <h2>Aurora</h2>
3  <p>A calm place to read and build.</p>
4  <button>Open</button>
5</article>

styles.cssCSS

1.card {
2  max-width: 320px;
3  padding: 24px;
4  border-radius: 16px;
5  background: #11151c;
6  color: #e7ecf3;
7  box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
8}
9.card button {
10  margin-top: 12px;
11  padding: 8px 16px;
12  border-radius: 9px;
13  border: 1px solid #2b3340;
14  background: #1b2230;
15  color: inherit;
16}

The styled step — inspect the spacing decisions

Concepts covered · 2

The box modeldeepened Selectorspracticed

Your first Python program

Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.

Build·beginner·8 min

Build a program with AI

The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.

Build·beginner·14 min

Your first C++ program

C++ trades a little ceremony for a lot of speed and control. Write a first program, learn the compile-then-run cycle, and open it in /code.

Liked this one?

Pass it on

Share on X Follow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

No pinned answers yet for this tutorial.