Skip to main content
Validación HTML

CSS: “line-height”: X no es un valor válido para “line-height”.

Acerca de este problema HTML

La propiedad CSS line-height controla el espaciado entre líneas de texto dentro de un elemento. Cuando el validador reporta que un valor “no es un valor válido para line-height“, significa que el valor que proporcionaste no coincide con ninguno de los formatos aceptados definidos en la especificación CSS.

Los errores comunes que desencadenan este error incluyen:

  • Palabras clave mal escritas — escribir norml o Normal en lugar de normal (las palabras clave CSS no distinguen mayúsculas y minúsculas en los navegadores, pero algunos validadores pueden marcar inconsistencias; el problema real son los errores de escritura).
  • Unidades inválidas o faltantes — usar una unidad que la especificación no soporta (p.ej., line-height: 1.5x;) o agregar accidentalmente una unidad a lo que debería ser un valor sin unidades (p.ej., confundir 1.5 con 1.5 em con un espacio).
  • Números mal formados — errores tipográficos como 1..5 o 24ppx.
  • Usar palabras clave no soportadas — valores como auto, thin o large no son válidos para line-height.
  • Valores negativosline-height no acepta números negativos.

Esto importa para el cumplimiento de estándares y el renderizado predecible. Aunque los navegadores pueden ignorar silenciosamente un valor inválido de line-height y recurrir a un valor por defecto, esto significa que tu estilo previsto no se aplicará, potencialmente causando texto superpuesto, mala legibilidad o diseños inconsistentes entre navegadores. Corregir errores de validación asegura que tus estilos funcionen como se pretende en todas partes.

Valores válidos para line-height

Formato Ejemplo Descripción
Palabra clave normal Valor por defecto del navegador (típicamente alrededor de 1.2)
Número sin unidades 1.5 Multiplicado por el tamaño de fuente del elemento — recomendado
Longitud 24px, 1.5em, 2rem Una longitud absoluta o relativa
Porcentaje 150% Relativo al tamaño de fuente del elemento

El formato de número sin unidades es generalmente preferido porque se escala apropiadamente con los tamaños de fuente heredados, evitando resultados inesperados en elementos anidados.

Ejemplos

❌ Incorrecto: valores inválidos que desencadenan el error

<!-- Palabra clave mal escrita -->

<p style="line-height: norml;">Texto con un line-height inválido.</p>

<!-- Unidad inválida -->

<p style="line-height: 1.5x;">Texto con una unidad no reconocida.</p>

<!-- Número mal formado -->

<p style="line-height: 1..5;">Texto con un error tipográfico en el número.</p>

<!-- Palabra clave no soportada -->

<p style="line-height: auto;">Auto no es válido para line-height.</p>

<!-- Valor negativo -->

<p style="line-height: -1.5;">Los valores negativos no están permitidos.</p>

✅ Correcto: valores válidos para line-height

<!-- Palabra clave -->

<p style="line-height: normal;">Altura de línea por defecto del navegador.</p>

<!-- Número sin unidades (recomendado) -->

<p style="line-height: 1.5;">1.5 veces el tamaño de fuente.</p>

<!-- Longitud con px -->

<p style="line-height: 24px;">Altura de línea fija de 24px.</p>

<!-- Longitud con em -->

<p style="line-height: 1.5em;">Altura de línea de 1.5em.</p>

<!-- Porcentaje -->

<p style="line-height: 150%;">150% del tamaño de fuente.</p>

Ejemplo de documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Valid line-height Example</title>
</head>
<body>
  <h1 style="line-height: 1.2;">Un encabezado con espaciado ajustado</h1>
  <p style="line-height: 1.6;">Este párrafo usa un line-height sin unidades de 1.6,
    que es una elección común para la legibilidad del texto del cuerpo. Se escala
    correctamente incluso si los elementos hijos tienen diferentes tamaños de fuente.</p>
</body>
</html>

Consejo: sin unidades vs. porcentaje/longitud

Un line-height sin unidades y un line-height con porcentaje pueden parecer equivalentes, pero se comportan de manera diferente con los estilos heredados. Un valor sin unidades se recalcula para cada elemento hijo basado en su propio tamaño de fuente, mientras que un porcentaje o longitud se calcula una vez en el padre y ese valor fijo se hereda. Para la mayoría de casos, los números sin unidades son la opción más segura.

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.