# CSS: “margin-X”: Y is not a “margin-X” value.

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

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

```html
<div style="margin-left: '-21px !important'; margin-right: '-21px !important';">
  Wide banner
</div>
```

## Valid example

Remove the quotes and keep `!important` after the value:

```html
<div style="margin-left: -21px !important; margin-right: -21px !important;">
  Wide banner
</div>
```