CSS: "margin-top": "px" no es un valor válido para "margin-top".

La propiedad margin-top acepta varios tipos de valores: longitudes (como 10px, 1.5em, 2rem), porcentajes (como 5%), la palabra clave auto, o el valor 0. Cuando escribes margin-top: px, el navegador encuentra una unidad desnuda sin número asociado, lo cual no tiene sentido — no sabe cuántos píxeles quieres. Los navegadores ignorarán completamente la declaración inválida, lo que significa que margin-top recurrirá a su valor por defecto o heredado. Esto puede llevar a resultados de diseño inesperados que pueden diferir entre navegadores.

Este error comúnmente ocurre debido a un error tipográfico, una eliminación accidental de la parte numérica, o una herramienta de plantillas/construcción que falló en interpolar una variable (ej., margin-top: ${value}px donde value estaba vacía). También puede ocurrir cuando editas CSS rápidamente y eliminas el número mientras pretendes cambiarlo.

Más allá de solo margin-top, este mismo principio se aplica a todas las propiedades CSS que aceptan valores de longitud — margin, padding, width, height, font-size, border-width, y muchas otras. Una unidad desnuda sin un número nunca es válida.

Nota: El valor 0 es la única longitud numérica que no requiere una unidad. Escribir margin-top: 0 es perfectamente válido y equivalente a margin-top: 0px.

Cómo solucionarlo

1. Agregar el número faltante antes de la unidad. Determina el espaciado que necesitas y anteponlo a la unidad (ej., 10px, 1.5em).
2. Usar una palabra clave válida si no necesitas un valor numérico específico — auto o inherit, por ejemplo.
3. Revisar las variables de plantilla si usas un preprocesador o sistema de plantillas. Asegúrate de que la variable que proporciona el número esté definida y no esté vacía.

Ejemplos

Incorrecto: unidad desnuda sin número

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

El validador reporta que "px" no es un valor válido para margin-top porque le falta un componente numérico.

Correcto: número seguido de una unidad

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

Correcto: usando cero sin unidad

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

Correcto: usando un valor de palabra clave

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

Incorrecto en una hoja de estilos

<style>
  .box {
    margin-top: px;
  }
</style>
<div class="box">Content</div>

Correcto en una hoja de estilos

<style>
  .box {
    margin-top: 16px;
  }
</style>
<div class="box">Content</div>

Incorrecto con salida de preprocesador CSS

Si usas un preprocesador como Sass o un framework de JavaScript, una variable indefinida o vacía puede producir este error:

<!-- Si la variable estaba vacía, la salida renderizada se convierte en: -->

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

Asegúrate de que la variable tenga un valor numérico válido para que el CSS renderizado esté completo:

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

Más información:

MDN Reference

MDN: margin-top

→