Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de altura de línea
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Altura de la línea Con sintaxis y ejemplos.
describir
La propiedad line-height de CSS define la altura utilizada para calcular la altura del cuadro de línea de los elementos en línea y define la altura mínima del cuadro de línea de los elementos a nivel de bloque.
sintaxis
La sintaxis de la propiedad CSS de altura de línea es:
line-height: value;parámetro o parámetro
valor
La altura utilizada para calcular la altura de la estructura alámbrica de los elementos en línea y la altura mínima de la estructura alámbrica de los elementos a nivel de bloque. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| normal | El valor normal utilizado por el navegador. div { altura de línea: normal; } |
| número | Valor numérico sin unidad multiplicado por el tamaño de fuente del elemento div { altura de línea: 1.5; } |
| estable | valor fijo en pt, em, … div {altura de línea: 12pt; } div {altura de línea: 1,5 em; } |
| porcentaje | valor porcentual div { altura de línea: 150%; } |
| no cualquiera | No se aplica altura de fila a los elementos div { altura de línea: ninguno; } |
| heredar | El elemento heredará la altura de la línea de su elemento principal div { altura de línea: heredar; } |
notas
- Los porcentajes y los valores de em pueden causar un comportamiento de herencia no deseado y probablemente no deberían usarse. Lo mejor es utilizar un número sin unidades (por ejemplo, 1,5).
- Cuando el valor se proporciona como un porcentaje, es relativo al tamaño de fuente del propio elemento.
Compatibilidad del navegador
La propiedad line-height de CSS tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de altura de línea a continuación, explorando ejemplos de cómo usar esta propiedad con valores fijos y porcentuales en CSS.
uso normal
Veamos cómo establecer la altura de línea en normal.
div { line-height: normal; }Este será el valor predeterminado utilizado por los navegadores. Puede encontrarse en una situación en la que la altura de la línea ha cambiado y desea volver a cambiarla a su comportamiento predeterminado.
Usar valores numéricos
Veamos un ejemplo en el que proporcionamos la altura de línea como un valor numérico sin unidades.
div { line-height: 1.2; }En este ejemplo de altura de línea de CSS, proporcionamos un valor de 1,2. Este valor es un número sin unidades que se multiplicará por el tamaño de fuente del elemento para calcular la altura del cuadro de línea.
usar valor fijo
Veamos un ejemplo de CSS en el que proporcionamos la altura de línea como un valor fijo en píxeles.
div { line-height: 35px; }En este ejemplo de altura de línea CSS, establecemos la altura de línea en 35 px.
También podemos representar la altura de la fila como un valor fijo en em.
div { line-height: 2em; }En este ejemplo, establecemos la altura de línea en 2 em.
porcentaje de uso
Veamos un ejemplo que proporciona la altura de fila como un porcentaje.
div { line-height: 125% }En este ejemplo de altura de CSS, establecemos la altura de línea en 125%.