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

El validador W3C reporta este error cuando encuentra padding-top: px; — una unidad sin componente numérico. En CSS, los valores de longitud se componen de dos partes: un número y un identificador de unidad (ej., px, em, rem, %, vh). La unidad sola no tiene significado sin un número que la cuantifique. Esto suele ocurrir por un error tipográfico, una variable de preprocesador que se resolvió a un valor vacío, o por borrar accidentalmente el número durante la edición.

Esto importa por varias razones. Los navegadores descartarán completamente la declaración inválida, lo que significa que padding-top volverá a su valor predeterminado o heredado — que puede no ser lo que pretendías. Esto puede causar diferencias de diseño impredecibles entre navegadores. Además, el CSS inválido puede interferir con el análisis de declaraciones posteriores en el mismo bloque de regla, causando potencialmente que otros estilos también sean ignorados.

Para solucionar este problema:

1. Añade un valor numérico antes de la unidad: cambia px por algo como 10px, 1.5em, o 20%.
2. Usa 0 sin unidad si quieres padding cero: padding-top: 0; es válido y preferible sobre padding-top: 0px;.
3. Verifica las variables del preprocesador (Sass, Less, etc.) para asegurarte de que se resuelvan a valores completos, no solo unidades.
4. Elimina la declaración completamente si no es necesario establecer padding-top.

Ejemplos

Incorrecto: unidad sin número

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

El valor px no es un valor válido para padding-top porque carece de componente numérico.

Correcto: número con unidad

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

Correcto: padding cero (no se necesita unidad)

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

Incorrecto en una hoja de estilos externa

.header {
  padding-top: px;
}

Correcto en una hoja de estilos externa

.header {
  padding-top: 16px;
}

Problema común con preprocesadores

Si usas un preprocesador CSS como Sass, ten cuidado con variables que podrían estar vacías o indefinidas:

/* Si $spacing se resuelve a vacío, esto produce "padding-top: px;" */
.card {
  padding-top: $spacing + px;
}

/* Enfoque más seguro — define la variable con el valor completo */
.card {
  padding-top: $spacing;  /* donde $spacing: 16px; */
}

Cualquier valor de longitud CSS válido funcionará para padding-top, incluyendo px, em, rem, %, vw, vh, ch, y otros — siempre que un número preceda a la unidad. El único valor de longitud que no requiere unidad es 0.

Más información:

MDN Reference

MDN: padding-top

→