Sobre este problema de CSS
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>
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.
Saiba mais: