# CSS: “margin-top”: “px” is not a “margin-top” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-margin-top-px-is-not-a-margin-top-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

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

### Correct: using zero without a unit

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

### Correct: using a keyword value

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

### Incorrect in a stylesheet

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

### Correct in a stylesheet

```html
<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:

```html
<!-- 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:

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