Propiedad CSS line-height

La propiedad line-height especifica la altura de una caja de línea, controlando el espacio vertical entre las líneas de texto. Es una de las propiedades más importantes para la legibilidad: las líneas demasiado juntas son difíciles de leer, mientras que las líneas muy separadas hacen que un párrafo parezca desconectado.

Esta página cubre la sintaxis, cada tipo de valor aceptado, por qué los valores sin unidades suelen ser la elección correcta, y los problemas de accesibilidad y herencia que hay que vigilar.

line-height se comporta de manera diferente según el tipo de elemento:

En elementos de bloque, la propiedad line-height establece la altura mínima de las cajas de línea dentro del elemento.
En elementos en línea no reemplazados, establece la altura utilizada en el cálculo de la altura de la caja de línea.
En elementos en línea reemplazados, como botones u otros elementos input, line-height típicamente no afecta el cálculo de la altura de la caja de línea.

Información

Los valores negativos son válidos.

Información

La line-height predeterminada es aproximadamente entre 110% y 120% en la mayoría de los navegadores.

La propiedad line-height establece el interlineado del texto. Si el valor de line-height es mayor que el valor de font-size de un elemento, la diferencia será el interlineado del texto.

Valor inicial	normal
Se aplica a	Todos los elementos.
Heredado	Sí.
Animable	Sí. La altura de las líneas es animable.
Versión	CSS1
Sintaxis DOM	object.style.lineHeight = "40px";

Sintaxis

Sintaxis de la propiedad CSS line-height

line-height: normal | number | length | percentage | calc | initial | inherit;

Ejemplo con el valor `normal`:

Ejemplo de la propiedad CSS line-height con el valor normal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: normal (default)</h3>
    <div>This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo con el valor `length`:

Ejemplo de la propiedad CSS line-height con el valor px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 10px</h3>
    <div>This is a paragraph with a specified line-height.
      <br /> The line height here is set to 10 pixels.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con el valor `percentage`:

Ejemplo de la propiedad CSS line-height con el valor %(porcentaje)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        line-height: 200%;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h2>line-height: 200%</h2>
    <div>This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con múltiples valores:

Ejemplo de la propiedad CSS line-height con valores cm, px, %(porcentaje), normal y number

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        line-height: 1;
      }
      div.b {
        line-height: 50px;
      }
      div.c {
        line-height: 0.5cm;
      }
      div.d {
        line-height: 1cm;
      }
      div.e {
        line-height: 200%;
      }
      div.f {
        line-height: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-height property example</h2>
    <h3>line-height: 1</h3>
    <div class="a">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1.
    </div>
    <h3>line-height: 50px</h3>
    <div class="b">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 50 pixels.
    </div>
    <h3>line-height: 0.5cm</h3>
    <div class="c">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 0.5 centimeter.
    </div>
    <h3>line-height: 1cm</h3>
    <div class="d">This is a paragraph with a specified line-height.
      <br /> The line height here is set to 1 centimeter.
    </div>
    <h3>line-height: 200%</h3>
    <div class="e">This is a paragraph with a bigger line-height.
      <br /> The line height here is set to 200%.
    </div>
    <h3>line-height: normal</h3>
    <div class="f">This is a paragraph with a standard line-height.
      <br /> The standard line height in most browsers is about 110% to 120%.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Elección del valor: sin unidades frente a con unidades

Esta es la decisión más importante al establecer line-height, y depende de cómo se hereda el valor:

Un número sin unidades (por ejemplo, line-height: 1.5) se hereda como el factor en sí. Cada descendiente multiplica el factor por su propio font-size, por lo que el espaciado siempre se escala correctamente.
Una longitud o porcentaje (por ejemplo, 1.5em o 150%) se calcula una sola vez en el elemento donde se declara y el valor resultante en píxeles se hereda. Los descendientes con un font-size diferente conservan esa altura en píxeles fija, lo que puede provocar que el texto se solape.

Compara ambos en un elemento padre cuyo hijo tiene una fuente más grande:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Recommended: each element scales the factor by its own font-size */
      .good { line-height: 1.5; }
      /* Problematic: computed pixel height is inherited as-is */
      .bad  { line-height: 150%; }
      .child { font-size: 3em; }
    </style>
  </head>
  <body>
    <div class="good">
      Parent text. <span class="child">Big inherited line scales fine.</span>
    </div>
    <div class="bad">
      Parent text. <span class="child">Big inherited line may overlap.</span>
    </div>
  </body>
</html>

Regla general: usa un número sin unidades para el texto del cuerpo. Recurre a una longitud fija (px/em) solo cuando deliberadamente quieras una caja de línea constante, como centrar verticalmente una sola línea de texto haciendo coincidir line-height con la altura del elemento.

Accesibilidad

El criterio de éxito de espaciado de texto WCAG 1.4.12 requiere que el contenido siga siendo legible cuando los usuarios anulan el interlineado a al menos 1,5 veces el tamaño de la fuente. Un valor de line-height sin unidades de 1.5 o más en el texto del cuerpo es un valor predeterminado seguro y accesible, y evita que los diseños se rompan cuando un usuario aplica su propio espaciado.

Valores

Valor	Descripción	Pruébalo
normal	Define una altura de línea normal. Es el valor predeterminado de esta propiedad.	Pruébalo »
length	Define una altura de línea fija en px, cm, em, etc.	Pruébalo »
number	Define un número que se multiplica por el tamaño de fuente actual para establecer la altura de línea.	Pruébalo »
%	Define una altura de línea en porcentaje del tamaño de fuente actual.	Pruébalo »
calc	Define una altura de línea mediante un cálculo.	Pruébalo »
initial	Hace que la propiedad use su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Nota: Se recomienda ampliamente usar la unidad em para line-heights escalables.

Práctica

¿Qué hace la propiedad 'line-height' en CSS?

Define la cantidad de espacio por encima y por debajo de los elementos en línea.Altera el ancho de una línea de texto.Establece la distancia entre las líneas de texto.Ajusta el tamaño de fuente del texto.

Sintaxis

Ejemplo con el valor normal:

Resultado

Ejemplo con el valor length:

Ejemplo con el valor percentage:

Ejemplo con múltiples valores:

Elección del valor: sin unidades frente a con unidades

Accesibilidad

Valores

Práctica

Ejemplo con el valor `normal`:

Ejemplo con el valor `length`:

Ejemplo con el valor `percentage`: