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 sin su 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 volverá a su valor predeterminado o heredado. Esto puede llevar a resultados de diseño inesperados que pueden diferir entre navegadores.

Este error ocurre comúnmente debido a un error tipográfico, una eliminación accidental de la parte numérica, o una herramienta de plantillas/construcción que falló al interpolar una variable (ej., margin-top: ${value}px donde value estaba vacío). También puede ocurrir al editar CSS rápidamente y eliminar el número mientras se intenta 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 sin 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. Añade el número faltante antes de la unidad. Determina el espaciado que necesitas y agrégalo antes de la unidad (ej., 10px, 1.5em).
2. Usa una palabra clave válida si no necesitas un valor numérico específico — auto o inherit, por ejemplo.
3. Verifica 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 sin número

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

El validador reporta que "px" no es un valor margin-top válido porque carece de 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

→