CSS: “padding-bottom”: “px” no es un valor válido para “padding-bottom”.

La propiedad padding-bottom define la cantidad de espacio entre el contenido de un elemento y su borde inferior. Como todas las propiedades CSS de longitud, espera un valor de longitud — un número emparejado con una unidad como px, em, rem, %, vh, etc. La cadena solitaria px es solo un identificador de unidad sin magnitud, por lo que los analizadores CSS no pueden interpretarla como una medida significativa. Esto típicamente ocurre cuando un valor numérico se elimina accidentalmente durante la edición, cuando un preprocesador CSS o motor de plantillas produce una variable vacía antes de la unidad, o cuando el código se escribe manualmente con un error tipográfico.

Cuando el navegador encuentra un valor inválido como padding-bottom: px, descarta toda la declaración y recurre al valor predeterminado o heredado. Esto puede llevar a cambios inesperados en el diseño, donde el espaciado se ve correcto en un navegador pero se rompe en otro dependiendo de cómo se aplican los valores predeterminados. Corregir estos errores asegura una renderización consistente entre navegadores y mantiene tus hojas de estilo conforme a los estándares.

Cómo solucionarlo

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 una unidad si quieres padding cero — escribir padding-bottom: 0 es válido y se prefiere sobre 0px.
3. Verifica las variables de plantilla — si estás usando un preprocesador como Sass o un motor de plantillas, asegúrate de que la variable que genera el número no esté vacía o indefinida.
4. Elimina la declaración completamente si padding-bottom no es necesario, en lugar de dejar un valor roto en su lugar.

Ejemplos

Incorrecto: unidad sin un número

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

El valor px solo no es válido porque no hay un número especificando la cantidad de padding.

Correcto: valor numérico con una unidad

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

Correcto: padding cero (no se necesita unidad)

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

Incorrecto en una hoja de estilos externa

.card {
  padding-bottom: px;
}

Correcto en una hoja de estilos externa

.card {
  padding-bottom: 16px;
}

Trampa común en preprocesadores

En Sass o herramientas similares, este problema a menudo surge de una variable vacía o indefinida:

$spacing: null;

.card {
  padding-bottom: #{$spacing}px; // Produce "padding-bottom: px;" si $spacing está vacía
}

La solución es asegurarse de que la variable contenga un número válido, o proporcionar un valor alternativo:

$spacing: 16;

.card {
  padding-bottom: #{$spacing}px; // Produce "padding-bottom: 16px;"
}

Aún mejor, incluye la unidad en la propia variable para evitar problemas de concatenación:

$spacing: 16px;

.card {
  padding-bottom: $spacing;
}

Más información:

MDN Reference

MDN: padding-bottom

→