HTML Guides for margin-left

When the W3C validator reports that "px" is not a valid margin-left value, it means the CSS declaration is missing its numeric component. A bare unit like px is meaningless on its own — CSS needs to know how many pixels you want. This typically happens due to a typo, an accidental deletion, or a templating/build tool that outputted an empty variable before the unit.

This matters because browsers will discard the entire declaration as invalid, meaning margin-left will fall back to its default or inherited value. This can cause unexpected layout shifts and make your design behave inconsistently. The issue applies equally to any CSS length property, not just margin-left.

Valid values for margin-left

The margin-left property accepts:

• A length value: a number followed by a unit, such as 10px, 2em, 1.5rem, 5vw
• A percentage: e.g., 5%
• The keyword auto
• The value 0 (which requires no unit)

A unit without a preceding number (like px, em, or %) is never valid.

Examples

Incorrect: unit with no number

<div style="margin-left: px;">Content</div>

The browser cannot interpret px alone and will ignore the declaration entirely.

Correct: number with a unit

<div style="margin-left: 10px;">Content</div>

Correct: zero margin (no unit needed)

<div style="margin-left: 0;">Content</div>

Incorrect: empty variable in a template

This issue often appears when a dynamic value is missing. For example, in a template:

<!-- If "spacing" is empty, this produces "margin-left: px;" -->

<div style="margin-left: {{spacing}}px;">Content</div>

To guard against this, ensure the variable always contains a valid number, or provide a fallback default.

Correct: using CSS custom properties with a fallback

If you’re working with CSS custom properties, you can use var() with a fallback value to prevent invalid declarations:

<div style="margin-left: var(--spacing, 10px);">Content</div>

Correct: in an external stylesheet

If the issue is in a linked stylesheet rather than inline styles, the same fix applies:

/* Incorrect */
.sidebar {
  margin-left: px;
}

/* Correct */
.sidebar {
  margin-left: 20px;
}

Quick checklist

• Ensure every length value has a number before the unit (e.g., 16px, 1em, 2rem).
• If you want no margin, use 0 — it’s the only numeric value that doesn’t need a unit.
• If using templates or preprocessors, verify that variables resolve to actual numbers before being concatenated with units.
• Consider using CSS calc() if you need computed values: margin-left: calc(2em + 4px);.