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

Acerca de este problema de CSS

Cuando el validador de W3C informa que "px" no es un valor válido para margin-left, significa que la declaración CSS carece de su componente numérico. Una unidad aislada como px no tiene significado por sí sola — CSS necesita saber cuántos píxeles quieres. Esto suele ocurrir debido a un error tipográfico, una eliminación accidental, o una herramienta de plantillas/compilación que generó una variable vacía antes de la unidad.

Esto es importante porque los navegadores descartarán toda la declaración como inválida, lo que significa que margin-left volverá a su valor por defecto o heredado. Esto puede causar cambios inesperados en el diseño y hacer que tu diseño se comporte de manera inconsistente. El problema se aplica igualmente a cualquier propiedad CSS de longitud, no solo a margin-left.

Valores válidos para `margin-left`

La propiedad margin-left acepta:

Un valor de longitud: un número seguido de una unidad, como 10px, 2em, 1.5rem, 5vw
Un porcentaje: por ejemplo, 5%
La palabra clave auto
El valor 0 (que no requiere unidad)

Una unidad sin un número que la preceda (como px, em, o %) nunca es válida.

Ejemplos

Incorrecto: unidad sin número

<div style="margin-left: px;">Contenido</div>

El navegador no puede interpretar px solo y ignorará la declaración completamente.

Correcto: número con una unidad

<div style="margin-left: 10px;">Contenido</div>

Correcto: margen cero (no se necesita unidad)

<div style="margin-left: 0;">Contenido</div>

Incorrecto: variable vacía en una plantilla

Este problema a menudo aparece cuando falta un valor dinámico. Por ejemplo, en una plantilla:

<!-- Si "spacing" está vacío, esto produce "margin-left: px;" -->

<div style="margin-left: {{spacing}}px;">Contenido</div>

Para protegerse contra esto, asegúrate de que la variable siempre contenga un número válido, o proporciona un valor por defecto de respaldo.

Correcto: usando propiedades personalizadas CSS con un valor de respaldo

Si estás trabajando con propiedades personalizadas CSS, puedes usar var() con un valor de respaldo para prevenir declaraciones inválidas:

<div style="margin-left: var(--spacing, 10px);">Contenido</div>

Correcto: en una hoja de estilos externa

Si el problema está en una hoja de estilos enlazada en lugar de estilos en línea, se aplica la misma solución:

/* Incorrecto */
.sidebar {
  margin-left: px;
}

/* Correcto */
.sidebar {
  margin-left: 20px;
}

Lista de verificación rápida

Asegúrate de que cada valor de longitud tenga un número antes de la unidad (por ejemplo, 16px, 1em, 2rem).
Si no quieres margen, usa 0 — es el único valor numérico que no necesita unidad.
Si usas plantillas o preprocesadores, verifica que las variables se resuelvan a números reales antes de ser concatenadas con unidades.
Considera usar CSS calc() si necesitas valores calculados: margin-left: calc(2em + 4px);.