Validación HTML: CSS: "margin-bottom": "px" no es un valor válido para "margin-bottom".

Acerca de este problema de CSS

El validador W3C muestra este error cuando encuentra una unidad desnuda como px usada como valor para margin-bottom sin un número que la acompañe. En CSS, los valores de longitud siempre se componen de dos partes: un <number> y una <unit>. El token px por sí solo no es un valor <length> válido — es solo un identificador de unidad sin magnitud. Esto suele ocurrir debido a un error tipográfico, una eliminación accidental de la parte numérica, o una herramienta de plantillas/compilación que genera una variable vacía antes de la unidad.

Esto importa por varias razones. Primero, los navegadores descartarán completamente la declaración inválida, lo que significa que margin-bottom volverá a su valor por defecto o heredado — probablemente no lo que pretendías. Esto puede causar cambios inesperados de diseño entre diferentes páginas o componentes. Segundo, el CSS inválido puede hacer que la depuración sea más difícil, ya que el fallo silencioso puede no ser obvio hasta que el diseño se rompa en un contexto específico. Tercero, un CSS limpio y válido es más fácil de mantener y señala calidad de código a los colaboradores.

Cómo solucionarlo

Añade un valor numérico antes de la unidad: cambia px por algo como 10px, 1.5em, o 20%.
Usa 0 sin unidad si quieres margen cero: margin-bottom: 0 es válido y preferible sobre margin-bottom: 0px.
Usa un valor de palabra clave si es apropiado: margin-bottom también acepta auto, inherit, initial, revert, y unset.
Verifica las variables de plantilla: si estás usando un preprocesador como Sass o un framework JavaScript que inyecta valores, asegúrate de que la variable no esté vacía o indefinida antes de la concatenación con la unidad.

Ejemplos

Incorrecto: unidad desnuda sin número

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

El valor px no es un valor válido para margin-bottom. El navegador ignorará esta declaración.

Correcto: valor numérico con unidad

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

Correcto: margen cero (no se necesita unidad)

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

Correcto: usando un valor de palabra clave

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

Incorrecto en una hoja de estilos

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

Hoja de estilos corregida

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

Cuidado con los problemas de preprocesadores

Si usas un preprocesador CSS como Sass o Less, una fuente común de este error es una variable vacía o indefinida:

/* Si $spacing se resuelve como vacío, esto produce "margin-bottom: px;" */
.card {
  margin-bottom: $spacing + px;
}

En su lugar, asegúrate de que la variable incluya la unidad o tenga un respaldo válido:

$spacing: 16px;

.card {
  margin-bottom: $spacing;
}

El mismo principio se aplica a cualquier propiedad CSS que espere un valor <length> — siempre empareja un número con su unidad, o usa 0 cuando no se necesite espaciado.