CSS: “px” no es un valor de “width”

En CSS, un valor de longitud está compuesto por dos partes: un número y una unidad. Escribir solo px proporciona la unidad pero omite el número, lo que hace que la declaración sea inválida. El analizador CSS no puede interpretar px solo como una medida significativa, por lo que la propiedad se ignora por completo. Esto significa que tu diseño previsto no se aplicará, potencialmente causando que los elementos se rendericen en tamaños inesperados en diferentes navegadores.

Este error surge comúnmente de errores tipográficos, errores de copiar y pegar, o problemas de plantillas donde una variable que debería generar un número se resuelve como una cadena vacía, dejando solo el sufijo de la unidad. También puede ocurrir cuando un valor numérico se borra accidentalmente durante la edición.

Más allá de las fallas de diseño, CSS inválido puede causar renderizado inconsistente entre navegadores. Algunos navegadores pueden descartar silenciosamente la declaración inválida, mientras que otros pueden aplicar un comportamiento de respaldo inesperado. Mantener tu CSS válido asegura resultados predecibles y compatibles con diferentes navegadores, y hace que tus hojas de estilo sean más fáciles de mantener y depurar.

Cómo arreglarlo

1. Agrega el valor numérico faltante — Empareja cada unidad con un número, ej., 300px, 1.5em, 50%.
2. Usa 0 sin una unidad para valores cero — El valor 0 es válido por sí mismo y no requiere una unidad.
3. Usa una palabra clave válida — Propiedades como width aceptan palabras clave como auto, min-content, max-content, y fit-content.
4. Verifica valores dinámicos — Si un preprocesador o motor de plantillas genera el valor, verifica que genere una longitud completa (ej., ${value}px donde value no esté vacío).

Ejemplos

Incorrecto: unidad sin un número

<style>
  .box {
    width: px;
  }
</style>
<div class="box">Content</div>

La declaración width: px es inválida porque px solo no es un valor CSS reconocido. El navegador descartará esta regla.

Incorrecto: número sin una unidad

<style>
  .box {
    width: 300;
  }
</style>
<div class="box">Content</div>

Un número sin unidades (que no sea 0) también es inválido para la propiedad width. Los navegadores también ignorarán esta declaración.

Correcto: número emparejado con una unidad

<style>
  .box {
    width: 300px;
  }
</style>
<div class="box">Content</div>

Correcto: usando diferentes unidades de longitud válidas

<style>
  .box-a {
    width: 50%;
  }
  .box-b {
    width: 20em;
  }
  .box-c {
    width: 15rem;
  }
  .box-d {
    width: 80vw;
  }
</style>

Correcto: valor cero y palabras clave

<style>
  .collapsed {
    width: 0;
  }
  .flexible {
    width: auto;
  }
  .intrinsic {
    width: fit-content;
  }
</style>

El valor 0 es el único número que no requiere una unidad en CSS. Palabras clave como auto, min-content, max-content, y fit-content también son válidas para width y no usan longitudes numéricas en absoluto.

Unidades de longitud CSS comunes

Siempre verifica que tus valores de longitud CSS incluyan tanto un número como una unidad. Si estás generando estilos dinámicamente, agrega salvaguardas para asegurar que la porción numérica nunca esté vacía antes de que la unidad sea añadida.

Más información:

MDN Reference

MDN: CSS width

→