Warning Shorthand property overriding an earlier longhand
Why declaring margin after margin-top silently resets it, and why shorthand/longhand declaration order matters in CSS.
The validator flags a rule where a shorthand property (margin, padding, border, font, background) is declared after one of its own longhand sub-properties in the same rule block.
Example
/* Wrong: margin resets margin-top back to 0 */
.card {
margin-top: 2rem;
margin: 1rem;
}
/* Right: shorthand first, then the specific override */
.card {
margin: 1rem;
margin-top: 2rem;
}Why it matters
A shorthand property like margin doesn't just set the sides it mentions — it resets all four of its longhand sub-properties every time it's declared, including ones you never explicitly wrote a value for in that block. In the "wrong" example above, margin-top: 2rem looks like it should win since it's more specific, but because margin: 1rem comes after it in the same rule, the cascade applies declarations in source order for equal specificity — the shorthand's implicit margin-top: 1rem overwrites the explicit one. This is a common source of "my CSS should be working but isn't" bugs, because both declarations are perfectly valid syntax and nothing looks obviously wrong when scanning the file.
Frequently asked questions
Does this apply across separate rule blocks too, not just one?
This check only looks within a single rule block, where the conflict is unambiguous. Across separate blocks the outcome also depends on selector specificity and stylesheet order, which is normal CSS cascade behavior rather than the same kind of same-block footgun.
Which shorthand properties does this check cover?
margin, padding, border, font, and background — the shorthands most commonly mixed with their longhand sub-properties in hand-written CSS.