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

La propiedad padding-right define la cantidad de espacio entre el contenido de un elemento y su borde derecho. Como todas las propiedades de longitud CSS, espera ya sea un valor de longitud válido (un número emparejado con una unidad como px, em, rem, %, vw, etc.), la palabra clave 0 (que no necesita unidad), o las palabras clave inherit/initial/unset. Una unidad sola como px sin número no tiene sentido — no le dice al navegador cuánto padding aplicar.

Este error típicamente ocurre debido a un error tipográfico, un problema de plantilla donde una variable falló al renderizarse, o la eliminación accidental de la parte numérica del valor. Por ejemplo, una plantilla como padding-right: {{ value }}px; podría producir padding-right: px; si value está vacío o indefinido.

Cuando el navegador encuentra un valor inválido como px, descarta toda la declaración y vuelve al valor por defecto o heredado para padding-right. Esto puede llevar a diferencias de diseño inesperadas entre navegadores y hace que tus intenciones no sean claras para otros desarrolladores. Corregir estos errores de validación también ayuda a mantener hojas de estilo limpias y predecibles.

Cómo solucionarlo

1. Añade el número faltante antes de la unidad: cambia px a un valor específico como 10px.
2. Usa 0 sin unidad si quieres sin padding: padding-right: 0; es válido y preferible sobre padding-right: 0px;.
3. Revisa las variables de plantilla y la generación dinámica de estilos para asegurar que los valores numéricos siempre se generen correctamente.

Ejemplos

Incorrecto: unidad sola sin número

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

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

Correcto: valor numérico con unidad

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

Correcto: padding cero (no se necesita unidad)

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

Correcto: usando otras unidades válidas

<div style="padding-right: 2em;">Content</div>

<div style="padding-right: 5%;">Content</div>

Incorrecto en una hoja de estilos externa

.sidebar {
  padding-right: px;
}

Corregido en una hoja de estilos externa

.sidebar {
  padding-right: 16px;
}

Protegiéndose contra valores vacíos en plantillas

Si generas CSS dinámicamente, asegúrate de que el valor numérico esté siempre presente. Por ejemplo, proporciona un valor de respaldo:

.sidebar {
  padding-right: 16px; /* valor por defecto seguro */
}

En lugar de depender de una plantilla que podría producir un valor vacío, considera establecer valores por defecto en tu CSS y solo sobreescribir con estilos en línea cuando estés seguro de que el valor es válido.

Más información:

MDN Reference

MDN: padding-right

→