CSS: “padding”: “px” no es un valor de “padding” válido.

La propiedad padding acepta uno o más valores de longitud, porcentajes, o la palabra clave 0. Un valor de longitud válido siempre consiste en un número inmediatamente seguido por un identificador de unidad, como 10px, 1.5em, o 2rem. Escribir solo px sin un número precedente no tiene sentido para el parser de CSS — es como decir “píxeles” sin especificar cuántos. El navegador descartará completamente la declaración inválida, lo que significa que el elemento volverá a su padding por defecto o heredado, potencialmente rompiendo tu layout de maneras inesperadas.

Este error ocurre comúnmente debido a:

• Errores tipográficos o eliminación accidental — la parte numérica del valor fue inadvertidamente eliminada durante la edición.
• Problemas de plantillas o herramientas de construcción — un valor dinámico (por ejemplo, de una variable o campo de CMS) se resolvió a una cadena vacía, dejando solo el sufijo px atrás.
• Errores de copiar-pegar — copiar un fragmento y olvidar actualizar el valor placeholder.

Debido a que el validador W3C marca esto en atributos style inline, significa que hay CSS inválido embebido directamente en tu HTML. Solucionarlo mejora el cumplimiento de estándares y asegura un renderizado consistente entre navegadores.

Cómo solucionarlo

1. Añadir un valor numérico antes de la unidad: cambiar px a algo como 10px, 1em, o 5%.
2. Usar 0 sin unidad si quieres padding cero — escribir padding: 0; es válido y preferible a padding: 0px;.
3. Verificar valores dinámicos — si el número viene de una variable o expresión de plantilla, asegúrate de que produzca un número válido y no esté vacío.

Ejemplos

Incorrecto: Unidad sin número

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

El validador reporta que px no es un valor de padding válido porque ningún número precede a la unidad.

Correcto: Valor numérico con unidad

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

Correcto: Padding cero (no se necesita unidad)

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

Cuando el valor es 0, no se requiere unidad ya que cero píxeles, cero ems, y cero por ciento son todos idénticos.

Correcto: Múltiples valores de padding

<div style="padding: 8px 16px;">Content</div>

Esto establece 8px de padding vertical y 16px de padding horizontal — ambos son valores de longitud válidos.

Incorrecto en CSS externo

El mismo problema puede aparecer en una hoja de estilos enlazada desde tu HTML:

.card {
  padding: px;
}

Solucionado en CSS externo

.card {
  padding: 12px;
}

Cuidado con valores generados por plantillas

Si usas un sistema de plantillas, verifica que la porción numérica realmente se renderice. Por ejemplo, una plantilla como esta podría producir el error si spacing está vacío:

<!-- Si spacing está vacío, esto se convierte en "padding: px;" -->

<div style="padding: {{ spacing }}px;">Content</div>

Asegúrate de que la variable siempre se resuelva a un número válido, o proporciona un valor de respaldo.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios