Common CSS bugs and gotchas — a field reference

Covered mechanically in the box-model lesson: adjacent vertical margins on block-level elements merge into a single margin equal to the larger of the two, never adding together. The fix: when a precise, additive gap is actually needed, use gap on a flex/grid container (which never collapses) instead of relying on adjacent margins.

Covered mechanically in the box-model lesson: content-box (the default) adds padding and border on top of the declared width instead of including them. The fix: box-sizing: border-box globally, so declared width is always the total rendered width.

Covered mechanically in the stacking-context lesson: z-index only compares within the same stacking context, and .parent's own z-index: 1 traps .child's 9999 inside it, comparing only against .parent's own siblings. The fix: raising the number never helps a trapped value — find and address the ancestor creating the unwanted stacking context instead.

Covered mechanically in the accessibility lesson: this is a genuinely common, genuinely damaging mistake, since a removed focus indicator makes every interactive element unusable for keyboard-only navigation. The fix: :focus-visible with a real, styled-but-visible indicator, which shows for keyboard nav specifically while suppressing the unwanted mouse-click outline.

Covered mechanically in the CSS-performance lesson: reading a layout-dependent property forces a synchronous layout recalculation, and interleaving reads with writes in a loop forces this on every single iteration. The fix: batch all reads first, then batch all writes — one layout pass for the whole operation instead of one per element.

Covered mechanically in the transitions-and-animations lesson: width/margin are layout-triggering properties, expensive to recompute on every single frame of an animation. The fix: achieve the same visual result with transform: scale() or translate(), which the GPU compositor handles far more cheaply.

Every one of these traces back to the same handful of mechanisms this domain already covered in depth: the box model's precise layer-by-layer measurement rules, the cascade's context-scoped comparisons (stacking contexts included), and the rendering pipeline's three stages with genuinely different costs. Recognizing a bug's shape on sight — "this smells like margin collapsing," "this smells like a trapped stacking context" — is what separates fixing a CSS layout issue quickly from re-deriving these mechanisms from first principles every single time one shows up.