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

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

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

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

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

### Correct: Number Paired With Unit

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

### Correct: Zero Margin (No Unit Needed)

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

### Correct: Using a Keyword

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

### Incorrect in an External Stylesheet

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

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

### Correct in an External Stylesheet

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

### Watch Out for Template Variables

A common cause in templating systems is an empty variable:

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

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