Skip to main content
Validación HTML

Solo "0" puede ser una "unidad". Debes poner una unidad después de tu número

Acerca de este problema de CSS

En CSS, la mayoría de los valores numéricos representan una longitud, tiempo, ángulo u otra dimensión, y la unidad le dice al navegador cómo interpretar el número. Escribir padding: 20 es ambiguo: ¿significa 20 píxeles, 20 ems o 20 por ciento? Sin una unidad, el navegador no tiene forma de determinar la intención del autor, por lo que trata el valor como inválido y descarta toda la declaración. Esto puede llevar a diseños rotos, espaciado faltante u otros problemas visuales que son difíciles de depurar.

La única excepción a esta regla es 0. Cero píxeles es lo mismo que cero ems, cero rems o cero por ciento: siempre es nada independientemente de la unidad. Debido a esto, la especificación de CSS permite que 0 se escriba sin una unidad. De hecho, omitir la unidad en valores cero se considera una buena práctica para CSS más limpio y conciso.

Este error de validación aparece comúnmente en atributos style en línea, que es donde lo encuentra el Validador HTML del W3C. Sin embargo, la misma regla se aplica al CSS escrito en elementos <style> y hojas de estilo externas.

Las causas comunes de este error incluyen:

  • Olvidar accidentalmente escribir la unidad después de un número.
  • Copiar y pegar valores de herramientas de diseño que no incluyen unidades.
  • Confundir CSS con el patrón element.style.width = "50" de JavaScript (donde algunas APIs aceptan números sin unidades).
  • Asumir que px es la unidad por defecto (no lo es: no hay unidad por defecto en CSS).

Ejemplos

Incorrecto: faltan unidades en valores numéricos

<div style="margin: 10; padding: 20; width: 300;">
  Contenido aquí
</div>

El validador reportará errores para 10, 20 y 300 porque ninguno de ellos tiene unidades.

Correcto: unidades especificadas en todos los valores que no son cero

<div style="margin: 10px; padding: 20px; width: 300px;">
  Contenido aquí
</div>

Correcto: cero sin una unidad

<div style="margin: 0; padding: 0; border: 0;">
  No se necesitan unidades para cero
</div>

Correcto: mezclando valores cero y no cero

<div style="margin: 0 10px 0 20px;">
  Los márgenes superior e inferior son cero, los laterales tienen unidades
</div>

Correcto: usando otros tipos de unidades

<p style="font-size: 1.2em; line-height: 1.5em; margin-bottom: 2rem;">
  Texto con unidades relativas
</p>

Ten en cuenta que line-height es un caso especial en CSS: en realidad acepta un número sin unidad (como 1.5) como un valor válido, donde el número actúa como un multiplicador del tamaño de fuente del elemento. Esto no es lo mismo que una unidad faltante; es una proporción deliberadamente sin unidades definida en la especificación. La mayoría de las otras propiedades no tienen este comportamiento.

Encuentra problemas como este automáticamente

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

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.