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
normloNormalen lugar denormal(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., confundir1.5con1.5 emcon un espacio). -
Números mal formados — errores tipográficos como
1..5o24ppx. -
Usar palabras clave no soportadas — valores como
auto,thinolargeno son válidos paraline-height. -
Valores negativos —
line-heightno 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.