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

Make a page respond: a click counter

A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.

Build·beginner·9 min

Build interaction with AI

The vibe-coder path for JS events: the event→state→render loop you must hold in your head, the prompt, and the review.

Build·beginner·8 min

Build a script with AI

The vibe-coder path for Python: the shape of a small program, the prompt, and the edge cases AI forgets.

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.