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; /*longitudes absolutas */ line-height: 3em; /* 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 Código CSS: Tenga en cuenta que el valor La propiedad acepta 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 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 El valor de la longitud 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:< div class = "box green" >
< h1 > Evite resultados inesperados mediante el uso de valores numéricos sin unidades con la propiedad line-heigth
La herencia de valores y porcentajes longitudinales conducirá a un comportamiento inesperado.
< div class = "box red" >
< h1 > Evite resultados inesperados utilizando valores numéricos sin unidades con la propiedad line-heigth
La herencia de valores y porcentajes longitudinales conducirá a un comportamiento inesperado.
.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;
}line-height de propiedad del 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 segundo elemento es relativo al tamaño de fuente del elemento Soporte de navegadores
Característica Chrome Firefox IE Ópera Safari Soporte básico 1.0 1.0 4 7 1.0 Características generales
line-height uno de los siguientes valores.normal
font-family utilizada en el elemento.line-height para evitar resultados inesperados provocados por la herencia de valores.em pueden dar lugar a resultados inesperados.Estructura line-height css
line-height: normal |
Consulte también
font que establece los valores de la font-style, font-weight, font-size, font-stretch y font-size-adjust.color que establece el valor de color de los elementos.
