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);.

The value given to a single-side margin property such as margin-left or margin-right does not match the syntax CSS allows for it, so browsers ignore the whole declaration.

Each side property (margin-top, margin-right, margin-bottom and margin-left) takes one value: a length like 10px or -1.5rem, a percentage like 5%, the keyword auto, or a global keyword such as inherit. Negative lengths are allowed, so -21px on its own is fine.

A common cause is wrapping the value in quotes, as in margin-left: '-21px'. Quotes turn the value into a CSS string, and no margin property accepts a string. This tends to happen when the style is built by code that quotes values the way JavaScript does (element.style.marginLeft = '-21px'). Putting !important inside the quotes makes it part of the string as well, so the priority flag is lost along with the value.

A keyword the property doesn't support, like margin-right: none, triggers the same message.

Invalid example

<div style="margin-left: '-21px !important'; margin-right: '-21px !important';">

Wide banner

</div>

Valid example

Remove the quotes and keep !important after the value:

<div style="margin-left: -21px !important; margin-right: -21px !important;">

Wide banner

</div>