
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 lafont-style
,font-weight
,font-size
,font-stretch
yfont-size-adjust
. - La página de propiedades
color
que establece el valor de color de los elementos.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS