HTML Guides for margin-top

The margin-top property accepts several types of values: lengths (like 10px, 1.5em, 2rem), percentages (like 5%), the keyword auto, or the value 0. When you write margin-top: px, the browser encounters a bare unit with no associated number, which is meaningless — it doesn’t know how many pixels you want. Browsers will ignore the invalid declaration entirely, which means margin-top will fall back to its default or inherited value. This can lead to unexpected layout results that may differ across browsers.

This error commonly happens due to a typo, an accidental deletion of the numeric portion, or a templating/build tool that failed to interpolate a variable (e.g., margin-top: ${value}px where value was empty). It can also occur when editing CSS quickly and removing the number while intending to change it.

Beyond just margin-top, this same principle applies to all CSS properties that accept length values — margin, padding, width, height, font-size, border-width, and many others. A bare unit without a number is never valid.

Note: The value 0 is the only numeric length that does not require a unit. Writing margin-top: 0 is perfectly valid and equivalent to margin-top: 0px.

How to fix it

1. Add the missing number before the unit. Determine the spacing you need and prepend it to the unit (e.g., 10px, 1.5em).
2. Use a valid keyword if you don’t need a specific numeric value — auto or inherit, for example.
3. Check template variables if you use a preprocessor or templating system. Make sure the variable that provides the number is defined and not empty.

Examples

Incorrect: bare unit with no number

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

The validator reports that "px" is not a valid margin-top value because it lacks a numeric component.

Correct: number followed by a unit

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

Correct: using zero without a unit

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

Correct: using a keyword value

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

Incorrect in a stylesheet

<style>
  .box {
    margin-top: px;
  }
</style>
<div class="box">Content</div>

Correct in a stylesheet

<style>
  .box {
    margin-top: 16px;
  }
</style>
<div class="box">Content</div>

Incorrect with CSS preprocessor output

If you use a preprocessor like Sass or a JavaScript framework, an undefined or empty variable can produce this error:

<!-- If the variable was empty, the rendered output becomes: -->

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

Ensure the variable has a valid numeric value so the rendered CSS is complete:

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