Topic
Definition
The CSS box model describes how each element’s rectangular box is sized from content, padding, border, and margin; normal flow lays those boxes out as block or inline boxes according to their display type.
In simpler words
Every element is a box. Width/height usually mean the content area unless you set box-sizing. Margin pushes neighbors away; padding grows space inside the border.
Content, padding, border, margin, box-sizing, block vs inline vs inline-block, and margin collapse in normal flow.
Content, padding, border, margin, box-sizing, block vs inline vs inline-block, and margin collapse in normal flow.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
.card {
box-sizing: border-box;
width: 320px;
padding: 16px;
border: 2px solid #d4d4d0;
margin: 0 0 16px;
display: block;
}
.badge {
display: inline-block;
padding: 2px 8px;
}Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.
// Wrong
.card {
width: 320px;
padding: 24px;
border: 2px solid black;
/* total outer width > 320px under content-box */
}
// Right
.card {
box-sizing: border-box;
width: 320px;
padding: 24px;
border: 2px solid black;
}With content-box, padding and border add outside width. border-box keeps the declared width as the border edge.
// Wrong
.a { margin-bottom: 20px; }
.b { margin-top: 20px; }
/* Hope for 40px gap between block siblings */
// Right
.stack > * + * { margin-top: 20px; }
/* or use gap in flex/grid */Adjacent vertical margins of block boxes often collapse to the larger value, not the sum.
// Wrong
span.label {
width: 200px;
height: 40px;
}
// Right
span.label {
display: inline-block;
width: 200px;
height: 40px;
}Width and height do not apply to non-replaced inline elements the way they do to blocks.
Live playground
Change one input at a time and predict the next render.
No interactive demo for course-css-box-model yet — use the code samples and Wrong vs Right examples above.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 3 · practical 2 · logic 2