HTML Guides for margin-right

When you write margin-right: px, the browser cannot determine what margin to apply because px alone is not a recognized CSS value — it's just a unit suffix without a quantity. CSS length values are always a combination of a number and a unit (e.g., 10px, 1.5em, 20%), or a specific keyword like auto, inherit, or 0 (which doesn't require a unit). The lone px is meaningless on its own and will be ignored by browsers, which means your intended spacing won't be applied.

This issue typically arises in a few common scenarios:

• A number was accidentally deleted during editing, leaving behind just the unit.
• A CSS preprocessor variable or template expression failed to output a value, resulting in only the unit being rendered.
• A typo or copy-paste error stripped the numeric portion.

Beyond simply not working, invalid CSS can cause unpredictable rendering differences across browsers. It also makes your code harder to maintain, as other developers may not understand the intended value.

To fix this, determine what numeric value you intended and place it directly before the px unit with no space between the number and unit. If no margin is needed, either remove the property entirely or set it to 0.

Examples

Incorrect: unit without a number

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

The validator reports that px is not a valid margin-right value because no number precedes the unit.

Fixed: complete value with number and unit

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

Fixed: using zero (no unit required)

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

When the value is 0, no unit is needed since zero is the same in all units.

Fixed: using a keyword value

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

The auto keyword is a valid value for margin-right and is commonly used for centering or pushing elements.

Watch for preprocessor or template issues

If you're using a CSS preprocessor or a templating language, make sure your variables resolve to complete values:

/* Incorrect — if $spacing is empty, this outputs "margin-right: px;" */

.sidebar {

margin-right: px;

}

/* Correct */

.sidebar {

margin-right: 16px;

}

Other valid units

Any valid CSS length unit works, as long as a number precedes it:

<div style="margin-right: 2em;">Em-based margin</div>

<div style="margin-right: 5%;">Percentage-based margin</div>

<div style="margin-right: 1.5rem;">Rem-based margin</div>

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

<div style="margin-left: '-21px !important'; margin-right: '-21px !important';">

Wide banner

</div>

Valid example

Remove the quotes and keep !important after the value:

<div style="margin-left: -21px !important; margin-right: -21px !important;">

Wide banner

</div>