CSS: “margin”: “px” is not a “margin” value.

CSS length values must always pair a number with a unit — writing just px, em, %, or any other unit without a preceding number is meaningless to the browser and will be ignored. This typically happens due to a typo, a copy-paste error, or a build tool / template that outputs a unit without its corresponding numeric value (e.g., a variable that resolved to an empty string concatenated with px).

When the W3C validator encounters margin: px in an inline style attribute, it flags the error because px on its own does not match any valid CSS value for the margin property. Valid values include lengths like 10px or 2em, percentages like 5%, the keyword auto, or the number 0 (which doesn’t need a unit). Browsers will discard the invalid declaration, meaning your intended spacing won’t be applied — potentially breaking your layout in subtle ways that are hard to debug.

This issue also applies to other CSS properties that accept length values, such as padding, width, height, top, left, border-width, font-size, and many more. The fix is always the same: ensure every unit has an accompanying number.

How to Fix It

1. Add the missing number before the unit: change px to something like 10px, 1.5em, or 20%.
2. Use 0 without a unit if you want zero margin — writing margin: 0 is valid and preferred over margin: 0px.
3. Use a keyword if appropriate, such as margin: auto for centering.
4. Remove the declaration if the margin value was unintentional or unnecessary.

If the value comes from a preprocessor, template engine, or JavaScript, check that the variable being interpolated is not empty or undefined before it gets concatenated with the unit string.

Examples

Incorrect: Unit Without a Number

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

The value px has no number, so this is invalid CSS.

Correct: Number Paired With Unit

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

Correct: Zero Margin (No Unit Needed)

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

Correct: Using a Keyword

<div style="margin: auto;">Content</div>

Incorrect in an External Stylesheet

This same error can appear in a <style> block or linked stylesheet:

<style>
  .card {
    margin: px;
  }
</style>

Correct in an External Stylesheet

<style>
  .card {
    margin: 16px;
  }
</style>

Watch Out for Template Variables

A common cause in templating systems is an empty variable:

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

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

To prevent this, ensure the variable contains the full value including the number, or add a fallback:

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

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing