Error Valor de longitud sin unidad

Por qué margin: 10 es CSS inválido mientras que margin: 0 está bien, y qué propiedades de longitud requieren unidad en cualquier valor distinto de cero.

El validador marca un número a secas (sin px, rem, % u otra unidad) en una propiedad de longitud, a menos que el valor sea exactamente 0.

Ejemplo

/* Incorrecto: sin unidad */
.caja { margin: 10; padding: 5; }

/* Correcto */
.caja { margin: 10px; padding: 0.5rem; }

/* Está bien: el cero nunca necesita unidad */
.caja { border-width: 0; }

Por qué importa

Los valores de longitud de CSS requieren una unidad para cualquier número distinto de cero — este es uno de los pocos lugares donde la especificación hace del cero un caso especial genuino, ya que una longitud de cero es la misma sin importar la unidad. Un número a secas como 10 en una propiedad como margin no es CSS válido, y el navegador descarta toda la declaración en vez de adivinar qué unidad se quiso decir. Este es un error común que viene de JavaScript u otros lenguajes donde un valor de estilo numérico a menudo se establece sin unidad — muchas API del DOM y librerías de CSS-en-JS agregan px automáticamente, lo cual puede hacer que la omisión se sienta natural de una forma en que no lo es en CSS puro.

Frequently asked questions

¿Por qué 0 es una excepción?

Una longitud de cero es la misma distancia física sin importar en qué unidad se mida — 0px, 0rem y 0% son todos idénticos — así que la especificación CSS permite omitir la unidad específicamente para el cero. Cualquier número distinto de cero sigue necesitando una.

¿A qué propiedades aplica esta revisión?

Propiedades de longitud comunes — margin, padding, width, height, desplazamientos de posicionamiento (top/right/bottom/left), font-size, anchos de borde, border-radius, gap, y algunas similares. Deliberadamente omite propiedades que legítimamente no llevan unidad, como line-height, z-index y opacity.