The box model, in depth
Why the card looks the way it does — content, padding, border, margin, and stacking.
A correct mental model of how every CSS box is sized and spaced.
box-sizing, the padding/border/margin layers, and how specificity decides which rule wins.
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.
<article class="card"> <h2>Aurora</h2> <p>A calm place to read and build.</p> <button>Open</button></article>.card { max-width: 320px; padding: 24px; border-radius: 16px; background: #11151c; color: #e7ecf3; box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);}.card button { margin-top: 12px; padding: 8px 16px; border-radius: 9px; border: 1px solid #2b3340; background: #1b2230; color: inherit;}More like this
Build your first web page
Hand-write a small, semantic page — a heading, a paragraph, a list — then open the same project in /code and make it yours.
Build a calculator
Most courses teach variables before you have anything to put in one. We are going to skip that pain. We build the calculator first; the concepts show up when the calculator demands them.
Style a card with CSS
The quickest way to feel CSS: take a plain card and give it depth, spacing, and a button — editing the same project the Deep and Reference tiers use.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the author. The author can pin answers to share with everyone.
Sign in to ask a question privately on this tutorial.
Sign inNo pinned answers yet for this tutorial.