W3Schools Errors & Gotchas

CSS Errors & Gotchas

Same-looking mistakes cause bugs: spacing, units, and defaults.

Common errors

1. Missed semicolon: color: red (on the LAST declaration it's fine, else it merges).
2. Typos in property names → the whole declaration is dropped.
3. Invalid values: padding-top: 20 (missing unit is ignored).
4. Forgetting the closing }.

A failing rule quirk

If a single declaration is invalid, the browser skips JUST that declaration, not the whole block.

p {
  color: red;
  font-siz: 16px;   /* typo → this line ignored */
  margin: 0;        /* still applies */
}

Default behavior gotchas

• width: 100% + padding overflows without box-sizing.
• margin-top collapses between siblings.
• position: absolute aligns to nearest position: relative parent.

Debugging tools

• Browser DevTools (Inspect > Computed).
• caniuse for feature questions.
• CSS validator for red flags.

TL;DR

• Invalid single declarations are skipped (others survive).
• Semicolons, units, brackets matter.
• Mind box-sizing, margin collapsing, abs-position.
• DevTools are your best friend.