Validación HTML: CSS: “margin-bottom”: “px” is not a “margin-bottom” value.

Acerca de este problema de CSS

The W3C validator raises this error when it encounters a bare unit like px used as the value for margin-bottom without an accompanying number. In CSS, length values are always composed of two parts: a <number> and a <unit>. The token px alone is not a valid <length> value — it’s just a unit identifier with no magnitude. This typically happens due to a typo, an accidental deletion of the numeric portion, or a templating/build tool that outputs an empty variable before the unit.

This matters for several reasons. First, browsers will discard the invalid declaration entirely, meaning margin-bottom will fall back to its default or inherited value — likely not what you intended. This can cause unexpected layout shifts across different pages or components. Second, invalid CSS can make debugging harder, since the silent failure may not be obvious until the layout breaks in a specific context. Third, clean, valid CSS is easier to maintain and signals code quality to collaborators.

How to fix it

Add a numeric value before the unit: change px to something like 10px, 1.5em, or 20%.
Use 0 without a unit if you want zero margin: margin-bottom: 0 is valid and preferred over margin-bottom: 0px.
Use a keyword value if appropriate: margin-bottom also accepts auto, inherit, initial, revert, and unset.
Check template variables: if you’re using a preprocessor like Sass or a JavaScript framework that injects values, make sure the variable isn’t empty or undefined before concatenation with the unit.

Examples

Incorrect: bare unit with no number

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

The value px is not a valid margin-bottom value. The browser will ignore this declaration.

Correct: numeric value with unit

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

Correct: zero margin (no unit needed)

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

Correct: using a keyword value

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

Incorrect in a stylesheet

<html lang="en">
<head>
  <title>Example</title>
  <style>
    .card {
      margin-bottom: px;
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Fixed stylesheet

<html lang="en">
<head>
  <title>Example</title>
  <style>
    .card {
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div class="card">Content</div>
</body>
</html>

Watch out for preprocessor issues

If you use a CSS preprocessor like Sass or Less, a common source of this error is an empty or undefined variable:

/* If $spacing resolves to empty, this produces "margin-bottom: px;" */
.card {
  margin-bottom: $spacing + px;
}

Instead, ensure the variable includes the unit or has a valid fallback:

$spacing: 16px;

.card {
  margin-bottom: $spacing;
}

The same principle applies to any CSS property that expects a <length> value — always pair a number with its unit, or use 0 when no spacing is needed.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios

Más información:

MDN Reference

MDN: margin-bottom

→

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?