Validación HTML: CSS: "padding-left": "px" no es un valor de "padding-left".

Acerca de este problema de CSS

La propiedad padding-left acepta un valor de longitud CSS válido, un porcentaje, o la palabra clave 0. Una longitud CSS siempre se compone de dos partes: un número y una unidad (p. ej., 10px, 2em, 1.5rem). Escribir solo px sin número es sintácticamente inválido — es una unidad desnuda sin magnitud, por lo que el navegador no puede determinar qué espaciado aplicar. Esto ocurre comúnmente debido a un error tipográfico, una variable faltante en una plantilla o preprocesador, o por borrar accidentalmente la parte numérica durante la edición.

Cuando el validador encuentra esto en un atributo style, marca el valor como CSS inválido. Aunque la mayoría de los navegadores simplemente ignorarán la declaración malformada y volverán al padding predeterminado, depender de este comportamiento de recuperación de errores lleva a diseños impredecibles. Solucionar el problema asegura que tus estilos se apliquen consistentemente en todos los navegadores y que tu marcado pase la validación.

Cómo solucionarlo

Agrega un valor numérico antes de la unidad: cambia px a algo como 10px, 1em, o 5%.
Si quieres padding cero, usa 0 — no se necesita unidad (aunque 0px también es válido).
Revisa las variables de plantilla y preprocesadores. Si estás usando un sistema como PHP, plantillas de JavaScript, o un preprocesador CSS (Sass, Less), asegúrate de que la variable que debería proporcionar el número no esté vacía o indefinida. Por ejemplo, padding-left: <?= $indent ?>px; producirá padding-left: px; si $indent está vacío.

Ejemplos

Incorrecto: unidad desnuda sin número

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

El valor px no tiene componente numérico, por lo que no es una longitud válida.

Correcto: valor numérico antes de la unidad

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

Correcto: padding cero (no se requiere unidad)

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

Incorrecto: variable vacía que produce una unidad desnuda

Esta es una fuente común del error en HTML generado dinámicamente o con plantillas:

<!-- Si la variable está vacía, esto se renderiza como "padding-left: px;" -->

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

Correcto: asegurar un valor de respaldo

Al generar estilos dinámicamente, siempre proporciona un valor predeterminado sensato para que la salida sea válida incluso si la variable falta:

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

Usando una hoja de estilos externa

La misma regla se aplica en CSS externo o incrustado. La versión incorrecta:

.sidebar {
  padding-left: px;
}

La versión corregida con un valor numérico apropiado:

.sidebar {
  padding-left: 20px;
}

Otros valores válidos para `padding-left`

Cualquier longitud CSS válida o porcentaje funciona:

<div style="padding-left: 2em;">Padding basado en em</div>
<div style="padding-left: 1.5rem;">Padding basado en rem</div>
<div style="padding-left: 5%;">Padding basado en porcentaje</div>