CSS: “padding-top”: “px” no es un valor de “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 están compuestos por dos partes: un número y un identificador de unidad (p. ej., px, em, rem, %, vh). La unidad sola no tiene significado sin un número que la cuantifique. Esto suele ocurrir debido a 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 es importante por varias razones. Los navegadores descartarán la declaración inválida por completo, lo que significa que padding-top volverá a su valor por defecto 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 reglas, 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 se prefiere 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 por completo si padding-top no necesita ser establecido.

Ejemplos

Incorrecto: unidad sin un número

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

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

Correcto: número con una unidad

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

Correcto: padding cero (no se necesita unidad)

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

Incorrecto en una hoja de estilos externa

.header {
  padding-top: px;
}

Correcto en una hoja de estilos externa

.header {
  padding-top: 16px;
}

Trampa común del preprocesador

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

/* Si $spacing de alguna manera 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 una unidad es 0.

Más información:

MDN Reference

MDN: padding-top

→