Debugging CSS, resets and browser support

Reading DevTools computed styles, hunting overflow and collapsed margins, choosing a reset, and feature queries.

Reading DevTools properly

The Styles pane shows every rule that matched and what it currently resolves to; the Computed pane shows the one value that won, with a link to the rule that set it. Debugging is mostly the habit of moving between those two views instead of guessing.

• Struck-through declarations are your best clue: hover the small arrow to jump to the rule that actually won.
• Toggle a declaration off instead of deleting it — the layout difference tells you whether it mattered.
• The box model diagram breaks the selected element into content, padding, border and margin with real numbers.
• Filter the Styles pane by property name to see every rule setting, say, width on this element.
• Search all stylesheets by selector text to find the one rule you cannot locate by clicking.

/* temporary: see where every box actually is */
* { background-color: rgb(255 0 0 / 0.06); }

/* temporary: catch an overflowing child inside a container */
.debug-overflow * { outline: 1px solid hotpink; }

Add a diagnostic rule, look, then remove it. Committing debug outlines is the most common way a temporary fix becomes a permanent bug.

Hunting overflow and collapsed margins

Two symptoms account for most "CSS is broken" moments: a horizontal scrollbar that should not exist, and vertical spacing that is smaller than the numbers suggest.

/* the symptom, not the cause */
body { overflow-x: hidden; }

/* real fixes */
img, video { max-inline-size: 100%; height: auto; }
.grid > * { min-inline-size: 0; }
pre, table { max-inline-size: 100%; overflow-x: auto; }
.stack  { display: flow-root; }   /* contains child margins */

• Horizontal overflow usually comes from an unbreakable long word or URL, a wide table or <pre>, a negative margin, a fixed-width child, or 100vw which includes the scrollbar width.
• Hiding the overflow hides the symptom: the content still does not fit, it is now simply unreachable.
• width: 100% plus padding overflows under content-box; box-sizing: border-box removes that whole category.
• Adjacent vertical margins collapse to the larger value, so 24px plus 24px is 24px, not 48px. Insert padding, a border, or display: flow-root when you need them to add up.
• Margins do not collapse in flex, grid or absolutely positioned boxes — which is why a layout can behave differently after one display change.

Resets and browser support

A reset removes browser defaults; a normalization keeps the useful ones and fixes the inconsistent ones. Modern browsers differ far less than they used to, so a short deliberate reset beats a large historical one.

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; }
:where(ul, ol)[class] { list-style: none; padding: 0; }

Feature queries let you use modern CSS safely by testing for support rather than guessing from a browser name. The browser parses the condition itself, and the answer is always about the exact feature you are using.

@supports (display: grid) {
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@supports selector(:has(*)) {
  .card:has(> img) { padding-block-start: 0; }
}

@supports not (color: oklch(50% 0.1 200)) {
  :root { --brand: #2f6fed; }
}

FAQ

Related

Positioning, stacking and overflow Transitions, transforms and animation

Last refreshed 2026-09-18.