Características line-height en CSS

La propiedad line-height en CSS establece el espaciado utilizado para las líneas, como en el texto, en elementos de bloque, define la altura mínima de los cuadros de línea dentro del elemento.

Funciones line-height css

Valor inicial	`normal`
Aplicado a	Todos los artículos.
Heredable	Sí
Móvil	Sí
Valor calculado	Como se especifica, excepto los valores relativos, que se convertirán a longitudes absolutas.

/* palabra reservada */ 
line-height:  normal;
/* Los números sin uno se multiplicarán por el valor del tamaño de fuente del elemento */ 
line-height:  3.5;
/* <length> longitudes absolutas */ 
line-height:  3em;
/* <porcentaje> porcentajes */ 
line-height:  34%;
/* valores globales */ 
line-height: inherit;
line-height: initial;
line-height: unset;

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad line-height con diferentes tipos de valores. Tenga en cuenta que todas las siguientes reglas establecerán la altura de la línea en el mismo valor:

div { line-height: 1.2;   font-size: 10pt; }
div { line-height: 1.2em; font-size: 10pt; }
div { line-height: 120%;  font-size: 10pt; }
div { font: 10pt/1.2  Georgia,serif; }

Es una buena idea establecer un valor line-height usando la propiedad de acceso directo font como se describe arriba, pero hacerlo requerirá que establezcamos el valor de la propiedad font-family también.

Valores numéricos sin unidades

El siguiente ejemplo muestra por qué es mejor usar valores numéricos en <number> lugar de longitudes <length>, ya que usaremos dos elementos <div>, el primero tiene un marco verde y usa un valor numérico sin uno, y el segundo tiene un marco rojo y usa un valor de longitud con uno em:

< div  class = "box green" > 
    < h1 > Evite resultados inesperados mediante el uso de valores numéricos sin unidades con la propiedad line-heigth </ h1 >
  La herencia de valores y porcentajes longitudinales conducirá a un comportamiento inesperado.
</ div >

< div  class = "box red" > 
    < h1 > Evite resultados inesperados utilizando valores numéricos sin unidades con la propiedad line-heigth </ h1 >
  La herencia de valores y porcentajes longitudinales conducirá a un comportamiento inesperado.
</ div >

Código CSS:

.green {
  line-height: 1.1;
  border: solid limegreen;
}
.red {
  line-height: 1.1em;
  border: solid red;
}
h1 {
  font-size: 30px;
}
.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

Tenga en cuenta que el valor line-height de propiedad del <h1> primer elemento es relativo al tamaño de fuente del elemento en sí (es decir, 30px x 1.1 = 33px), mientras que el valor line-height de propiedad del <h1> segundo elemento es relativo al tamaño de fuente del elemento <div> principal (es decir, 15px x 1.1 = 16.5px) y este valor no es apropiado en absoluto.

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	1.0	4	7	1.0

Características generales

La propiedad acepta line-height uno de los siguientes valores.

normal

El valor varía entre los navegadores, y los navegadores de escritorio utilizan un valor de alrededor de 1,2, varía según el tipo de fuente font-family utilizada en el elemento.

<number>

Dado valor utilizado es el número exacto multiplicado por el tamaño de fuente utilizado en el propio elemento y, en la mayoría de los casos, esta es la forma preferida de establecer la propiedad line-height para evitar resultados inesperados provocados por la herencia de valores.

<length>

El valor de la longitud <length> se utilizará para calcular la altura de la línea.

<percentage>

Este valor es relativo al tamaño de fuente utilizado en el propio elemento. Tenga en cuenta que los porcentajes y las longitudes de uno em pueden dar lugar a resultados inesperados.

Estructura line-height css

line-height: normal | <number> | <length> | <percentage>;

Consulte también

La página de propiedades font que establece los valores de la font-style, font-weight, font-size, font-stretch y font-size-adjust.
La página de propiedades color que establece el valor de color de los elementos.